Category: React Native Answers

Sometimes, we want to fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native.

In this article, we’ll look at how to fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native.

How to fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native?

To fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native, we should have a single child component in the TouchableHighlight component.

For instance, we write

const Comnp = () => {
  //...
  const { height, width } = Dimensions.get("window");
  return (
    <View style={styles.container}>
      <Image
        style={{
          height,
          width,
        }}
        source={require("image!foo")}
        resizeMode="cover"
      />
      <TouchableHighlight style={styles.button}>
        <Text> highlight text</Text>
      </TouchableHighlight>
    </View>
  );
};

to add the Text component into the TouchableHighlight component.

We keep the Image outside the TouchableHighlight so we only have a single child component in the TouchableHighlight component.

Conclusion

To fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native, we should have a single child component in the TouchableHighlight component.

Sometimes, we want to align text input correctly in React Native.

In this article, we’ll look at how to align text input correctly in React Native.

How to align text input correctly in React Native?

To align text input correctly in React Native, we set the textAlignVertical style to 'top'.

For instance, we write

<TextInput
  style={{
    flex: 1,
    width: "100%",
    height: 150,
    color: "#FFF",
    textAlignVertical: "top",
  }}
  multiline
  numberOfLines={10}
/>;

to set the textAlignVertical style of the TextInput component to 'top' so that it takes input from the top left corner.

We make the TextInput take multiple lines of input with the multiline prop.

And we set the numberOfLines prop to make the input accept 10 lines of input.

Conclusion

To align text input correctly in React Native, we set the textAlignVertical style to 'top'.

Sometimes, we want to add absolute position and in a flexbox container in React Native.

In this article, we’ll look at how to add absolute position and in a flexbox container in React Native.

How to add absolute position and in a flexbox container in React Native?

To add absolute position and in a flexbox container in React Native, we can set position to 'absolute' and set the left, top, right, and bottom values.

For instance, we write

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
});

to set the position to 'absolute'.

And then we set the left, top, right, and bottom values to position the component with the styles in pixels.

Conclusion

To add absolute position and in a flexbox container in React Native, we can set position to 'absolute' and set the left, top, right, and bottom values.

Sometimes, we want to require image module using dynamic names with React Native.

In this article, we’ll look at how to require image module using dynamic names with React Native.

How to require image module using dynamic names with React Native?

To require image module using dynamic names with React Native, we can call require with a string based on another value.

For instance, we write

const icon = props.active
  ? require("image!my-icon-active")
  : require("image!my-icon-inactive");
<Image source={icon} />;

to call require with different image names based on the value of props.active.

And then we set the source prop to icon in the Image component.

Conclusion

To require image module using dynamic names with React Native, we can call require with a string based on another value.

Sometimes, we want to add another VirtualizedList-backed container with React-Native.

In this article, we’ll look at how to add another VirtualizedList-backed container with React-Native.

How to add another VirtualizedList-backed container with React-Native?

To add another VirtualizedList-backed container with React-Native, we can set the ListHeaderComponent and ListFooterComponent props of the FlatList.

For instance, we write

<SafeAreaView style={{ flex: 1 }}>
  <FlatList
    data={data}
    ListHeaderComponent={ContentThatGoesAboveTheFlatList}
    ListFooterComponent={ContentThatGoesBelowTheFlatList}
  />
</SafeAreaView>

to set ListHeaderComponent prop to the ContentThatGoesAboveTheFlatList component and ListFooterComponent prop to the ContentThatGoesBelowTheFlatList component.

Then all the components will show beside the FlatList.

We put them in the SafeAreaView component to render the FlatList within the safe area boundaries of the device.

Conclusion

To add another VirtualizedList-backed container with React-Native, we can set the ListHeaderComponent and ListFooterComponent props of the FlatList.