Category: React Native Answers

To populate the right side of the navigation header with React Native, we set the screnOptions prop o

<Stack.Navigator>
  <Stack.Group
    screenOptions={({ route, navigation }) => ({
      headerRight: () => <Button onPress={() => navigation.navigate("Home")} />,
    })}
  >
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Group>
  <Stack.Group screenOptions={{ presentation: "modal" }}>
    <Stack.Screen name="Settings" component={Settings} />
    <Stack.Screen name="Share" component={Share} />
  </Stack.Group>
</Stack.Navigator>;

to add the Stack.Group‘s screenOptions prop.

We set it to a function that has a button on the right by setting headerRight to a function that renders a Button.

To remove top header from the navigation with React Native, we can set the static navigationOptions.header propety to null or callnavigation.setOptions.

For instance, we write

export default class Login extends Component {
  static navigationOptions = {
    header: null,
  };
}

to set the navigationOptions.header property to null in our component to remove the header.

Also, we can write

setTimeout(() => {
  navigation.setOptions({
    header: () => (
      <View style={{ backgroundColor: "white" }}>
        <Text
          style={[
            { color: "white" },
            Platform.OS === "android" ? { fontSize: 20 } : { fontSize: 1 },
          ]}
        >
          .
        </Text>
      </View>
    ),
  });
}, 1);

to call call navigation.setOptions with an object with the header property set to a white View to hide the header.

To open email client with React Native, we call Linking.openURL to open the email address with the mailto URL.

For instance, we write

<Button
  onPress={() => Linking.openURL("mailto:support@example.com")}
  title="support@example.com"
/>;

to call Linking.openURL with the email URL.

Also, we can call it with a subject and body by writing

<Button
  onPress={() =>
    Linking.openURL(
      "mailto:support@example.com?subject=SendMail&body=Description"
    )
  }
  title="support@example.com"
/>;

We just add the subject and body into the URL as query parameters.

To open email client with React Native, we call Linking.openURL to open the email address with the mailto URL.

For instance, we write

<Button
  onPress={() => Linking.openURL("mailto:support@example.com")}
  title="support@example.com"
/>;

to call Linking.openURL with the email URL.

Also, we can call it with a subject and body by writing

<Button
  onPress={() =>
    Linking.openURL(
      "mailto:support@example.com?subject=SendMail&body=Description"
    )
  }
  title="support@example.com"
/>;

We just add the subject and body into the URL as query parameters.

To override style with React Native, we set the style prop to the styles we want by putting them in an object.

For example, we write

const styles = StyleSheet.create({
  CircleShapeView: {
    width: 50,
    height: 50,
    borderRadius: 50 / 2,
    backgroundColor: "#000",
  },
});

//...

<Image style={[styles.CircleShapeView, { backgroundColor: "#fff" }]} />;

to set the style prop of the image to an array with the styles object and an object with the backgroundColor we want to set.

The background color is #fff since the 2nd object has the latest backgroundColor value.