React Native

snippets.md

React Native

Switchの色を変える

<Switch
  value={isGlutenFree}
  trackColor={{ true: Colors.primary }}
  onValueChange={(newValue) => setIsGlutenFree(newValue)}
/>

TextのstyleをPropsで受け取るときの型の例

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

type Props = {
  style?: TextStyle;
};

const DefaultText: React.FC<Props> = (props) => {
  return <Text style={{ ...styles.text, ...props.style }}></Text>;
};

export default DefaultText;

const styles = StyleSheet.create({
  text: {
    fontFamily: 'open-sans',
  },
});

Platformファイルを作ったときのTypeScriptのimport

https://stackoverflow.com/a/59972215

just omit the extension for one of them, then typescript will pick up the default one.

• component.tsx
• component.android.tsx Android will pick up the specific android file, and iOS will default to normal one.

Navigatorをネストしたときにヘッダーを隠す

headerShownオプションが鍵。この場合、MealsStackNavigatorがTab.Navigatorにネストしてる

    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="Meals" component={MealsStackNavigator} />
      <Tab.Screen name="Favorites" component={FavoritesScreen} />
    </Tab.Navigator>

Stack NavigationとTypeScriptをうまく使う方法

import { NativeStackScreenProps } from '@react-navigation/native-stack';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { RootStackParamList } from '../navigation/MealsNavigator';

interface Props extends NativeStackScreenProps<RootStackParamList> {}

const CategoriesScreen: React.FunctionComponent<Props> = (props) => {
  return (
    <View style={styles.screen}>
      <Text>Categories Screen</Text>
      <Button
        title="GO TO MEALS!"
        onPress={() => {
          props.navigation.navigate('CategoryMeals');
        }}
      />
    </View>
  );
};

export default CategoriesScreen;

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

navigateにルートパラメータを渡す

props.navigation.navigate('CategoryMeals', {
  categoryId: itemData.item.id,
})

// それを使う
interface Props
  extends NativeStackScreenProps<RootStackParamList, 'CategoryMeals'> {}

const CategoryMealsScreen: React.FunctionComponent<Props> = (props) => {
  const { categoryId } = props.route.params;

デフォルトのNavigationOption

NavigatorのscreenOptionsを使う

  <NavigationContainer>
    <Stack.Navigator
      initialRouteName="Categories"
      screenOptions={{
        headerStyle: {
          backgroundColor: Platform.OS === 'android' ? Colors.primary : '',
        },
        headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primary,
      }}
    >
      <Stack.Screen
        name="Categories"
        component={CategoriesScreen}
        options={{
          headerTitle: 'Meal Categories',
        }}
      />
      <Stack.Screen
        name="CategoryMeals"
        component={CategoryMealsScreen}
        options={(props) => ({
          title: CATEGORIES.find((c) => c.id === props.route.params.categoryId)
            ?.title,
        })}
      />
      <Stack.Screen name="MealDetail" component={MealDetailScreen} />
    </Stack.Navigator>
  </NavigationContainer>