Category: React

Sometimes, we want to call child component function from parent component in React Native.

In this article, we’ll look at how to call child component function from parent component in React Native.

How to call child component function from parent component in React Native?

To call child component function from parent component in React Native, we can use the useImperativeHandle hook.

For instance, we write:

import * as React from 'react';
import { View, Button } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

const Child = React.forwardRef((props, ref) => {
  const { foo } = props;
  React.useImperativeHandle(ref, () => ({
    method: () => {
      console.log(foo);
    },
  }));

  return <View></View>;
});

export default function App() {
  const ref = React.useRef();
  const onPress = () => {
    ref.current.method();
  };

  return (
    <View style={{ flex: 1 }}>
      <Button onPress={onPress} title="Hello" />
      <Child foo="bar" ref={ref} />
    </View>
  );
}

to create the Child component with forWardRef with a function that takes the props and ref.

In it, we call useImperativeHandle with ref and a function that returns the methods we can call from the ref assigned to the Child component.

Next, we create a ref with useRef in App.

And then we call ref.current.method in onPress which is run when we press the button.

We add Child beneath Button and assign a ref to it to let us call ref.current.method.

Conclusion

To call child component function from parent component in React Native, we can use the useImperativeHandle hook.

Sometimes, we want to add a button in React Native.

In this article, we’ll look at how to add a button in React Native.

How to add a button in React Native?

To add a button in React Native, we can use the Button component.

For instance, we write:

import * as React from 'react';
import { View, Button } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const onPress = () => {
    console.log('button pressed');
  };

  return (
    <View style={{ flex: 1 }}>
      <Button onPress={onPress} title="Hello" color="green" />
    </View>
  );
}

to add a Button.

The title of the button is the button text.

color sets the background color.

The onPress prop is set to the onPress function which runs when the button is pressed.

As a result, 'button pressed' is logged when we press on the button.

Conclusion

To add a button in React Native, we can use the Button component.

Sometimes, we want to apply different styles applied on orientation change with React Native.

In this article, we’ll look at how to apply different styles applied on orientation change with React Native.

How to apply different styles applied on orientation change with React Native?

To apply different styles applied on orientation change with React Native, we can call Dimension.addEventListener and the Platform.isPortrait methods.

For instance, we write:

import * as React from 'react';
import { View, Text, Dimensions, Platform } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  React.useEffect(() => {
    const onDimensionChange = () => {
      console.log(Platform.isPortrait());
    };

    Dimensions.addEventListener('change', onDimensionChange);
    return () => {
      Dimensions.removeEventListener('change', onDimensionChange);
    };
  }, []);
  
  return <View></View>;
}

to call Dimensions.addEventListener method with 'change' to watch for changes in the screen dimensions.

onDimensionChange is the screen dimension change listener.

Platform.isPortrait returns true is our screen is in portrait mode.

We return a function that calls Dimensions.removeEventListener to remove the listener when App unmounts.

Conclusion

To apply different styles applied on orientation change with React Native, we can call Dimension.addEventListener and the Platform.isPortrait methods.

Sometimes, we want to make items display inline in React Native.

In this article, we’ll look at how to make items display inline in React Native.

How to make items display inline in React Native?

To make items display inline in React Native, we can use set flexDirection to 'row'.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View
      style={{
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flexDirection: 'row',
      }}>
      <Text style={{ width: 100 }}>foo</Text>
      <Text style={{ width: 100 }}>bar</Text>
    </View>
  );
}

to set the outer view’s style to have flexDirection set to 'row' and flexWrap set to 'wrap' to make the Text components display side by side and wrap them to the next row if they overflow the width of the screen.

alignItems is set to 'flex-start' to make the align the Text components on the left on the screen.

Conclusion

To make items display inline in React Native, we can use set flexDirection to 'row'.

Sometimes, we want to set up a table layout in React Native.

In this article, we’ll look at how to set up a table layout in React Native.

How to set up a table layout in React Native?

To set up a table layout in React Native, we can nest views.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

const renderRow = (item) => {
  return (
    <View
      style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}
      key={item}>
      <View style={{ flex: 1, alignSelf: 'stretch' }}>
        <Text>{item}</Text>
      </View>
      <View style={{ flex: 1, alignSelf: 'stretch' }}>
        <Text>{item}</Text>
      </View>
      <View style={{ flex: 1, alignSelf: 'stretch' }}>
        <Text>{item}</Text>
      </View>
    </View>
  );
};

export default function App() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      {Array(5)
        .fill()
        .map((_, i) => {
          return renderRow(i);
        })}
    </View>
  );
}

to create the renderRow function that renders a View with Views inside.

We make them display side by side by setting flexDirection to 'row'.

And we make the outer View span the width of the outermost View by setting alignSelf to 'stretch' and flex to 1.

Finally, we call renderRow in the map callback to render the nested Views in renderRow.

Conclusion

To set up a table layout in React Native, we can nest views.