On a global scale, React is objectively “better” by the numbers,
but “better for your project” → depends on your team’s needs, deadlines, regulations, and technical debt.

import { Box, Text, Toast } from 'native-base';
import React from 'react';

export const errorToast = (message) => {
  const id = 'error-toast';
  if (Toast.isActive(id)) return;

  Toast.show({
    id,
    duration: 10000,
    render: () => (
      <Box bg="red.500" p="2" rounded="sm" mb={5}>
        <Text fontSize="md" color="white">
          {message}
        </Text>
      </Box>
    ),
  });
};

export const successMessageToast = (message) => {
  const id = 'success-toast';
  if (Toast.isActive(id)) return;

  Toast.show({
    id,
    duration: 5000,
    render: () => (
      <Box bg="success.500" p="2" rounded="sm" mb={5}>
        <Text fontSize="md" color="white">
          {message}
        </Text>
      </Box>
    ),
  });
};

export const infoMessageToast = (message) => {
  const id = 'info-toast';
  if (Toast.isActive(id)) return;

  Toast.show({
    id,
    duration: 5000,
    render: () => (
      <Box bg="info.500" p="2" rounded="sm" mb={5}>
        <Text fontSize="md" color="white">
          {message}
        </Text>
      </Box>
    ),
  });
};

import { errorToast, successMessageToast } from './toastHelpers';

const handleSubmit = async () => {
  try {
    await api.submit();
    successMessageToast("Submitted successfully!");
  } catch (e) {
    errorToast("Something went wrong.");
  }
};

import { Button } from 'react-native';

const MyComponent = () => {
  return (
    <Button title="Press Me" onPress={() => console.log('Button Pressed')} />
  );
};

import { Button } from 'react-native';
import { useCallback } from 'react';

const MyComponent = () => {
  const handlePress = useCallback(() => {
    console.log('Button Pressed');
  }, []);

  return <Button title="Press Me" onPress={handlePress} />;
};

import { StyleSheet, Text } from 'react-native';

const MyComponent = () => {
  return <Text style={styles.text}>Hello</Text>;
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    paddingTop: 20, // Might look bad on iOS
  },
});

import { StyleSheet, Text, Platform } from 'react-native';

const MyComponent = () => {
  return <Text style={styles.text}>Hello</Text>;
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    paddingTop: Platform.select({ ios: 20, android: 10 }),
  },
});

import { View, StyleSheet } from 'react-native';

const Box = () => <View style={styles.box} />;

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

import { View, StyleSheet } from 'react-native';

const Box = () => <View style={styles.box} />;

const styles = StyleSheet.create({
  box: {
    flex: 1,
    backgroundColor: 'blue',
  },
});