Categories
React Native Answers

How to use border radius only for 1 corner with React Native?

Sometimes, we want to use border radius only for 1 corner with React Native.

In this article, we’ll look at how to use border radius only for 1 corner with React Native.

How to use border radius only for 1 corner with React Native?

To use border radius only for 1 corner with React Native, we can use the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, or borderTopRightRadius properties.

For instance, we write

const styles = EStyleSheet.create({
  imgBox: {
    width: px(72),
    height: px(72),
    borderBottomLeftRadius: 2,
    borderTopLeftRadius: 2,
    overflow: "hidden",
  },
  img: {
    width: px(72),
    height: px(72),
  },
});

//...

const Comp = () => {
  //...
  return (
    <View style={styles.imgBox}>
      <Image source={{ uri: "your image url" }} style={styles.img} />
    </View>
  );
};

to create a stylesheet wiht create.

We set the borderBottomLeftRadius and borderTopLeftRadius properties to set the border radius for those 2 corners in pixels.

Then we apply the imgBox style to the View which has the border radius styles.

Conclusion

To use border radius only for 1 corner with React Native, we can use the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, or borderTopRightRadius properties.

Categories
React Native Answers

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?

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.

Categories
React Native Answers

How to align text input correctly in React Native?

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'.

Categories
React Native Answers

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

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.

Categories
React Native Answers

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

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.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.