官方链接

Basic Components

TextInput

  1. import React from "react";
  2. import { SafeAreaView, StyleSheet, TextInput } from "react-native";
  4. const App = () => {
  5.   const [text, onChangeText] = React.useState("Useless Text");
  6.   const [number, onChangeNumber] = React.useState("");
  8.   return (
  9.     <SafeAreaView>
  10.       <TextInput
  11.         style={styles.input}
  12.         onChangeText={onChangeText}
  13.         value={text}
  14.       />
  15.       <TextInput
  16.         style={styles.input}
  17.         onChangeText={onChangeNumber}
  18.         value={number}
  19.         placeholder="useless placeholder"
  20.         keyboardType="numeric"
  21.       />
  22.     </SafeAreaView>
  23.   );
  24. };
  26. const styles = StyleSheet.create({
  27.   input: {
  28.     height: 40,
  29.     margin: 12,
  30.     borderWidth: 1,
  31.     padding: 10,
  32.   },
  33. });
  35. export default App;

ScrollView

  1. import React from 'react';
  2. import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';
  4. const App = () => {
  5.   return (
  6.     <SafeAreaView style={styles.container}>
  7.       <ScrollView style={styles.scrollView}>
  8.         <Text style={styles.text}>
  9.           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  10.           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
  11.           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  12.           aliquip ex ea commodo consequat. Duis aute irure dolor in
  13.           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  14.           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  15.           culpa qui officia deserunt mollit anim id est laborum.
  16.           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  17.           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
  18.           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  19.           aliquip ex ea commodo consequat. Duis aute irure dolor in
  20.           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  21.           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  22.           culpa qui officia deserunt mollit anim id est laborum.
  23.           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  24.           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
  25.           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  26.           aliquip ex ea commodo consequat. Duis aute irure dolor in
  27.           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  28.           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  29.           culpa qui officia deserunt mollit anim id est laborum.
  30.         </Text>
  31.       </ScrollView>
  32.     </SafeAreaView>
  33.   );
  34. }
  36. const styles = StyleSheet.create({
  37.   container: {
  38.     flex: 1,
  39.     paddingTop: StatusBar.currentHeight,
  40.   },
  41.   scrollView: {
  42.     backgroundColor: 'pink',
  43.     marginHorizontal: 20,
  44.   },
  45.   text: {
  46.     fontSize: 42,
  47.   },
  48. });
  50. export default App;

StyleSheet

  1. import React from 'react';
  2. import { StyleSheet, Text, View } from 'react-native';
  4. const App = () => (
  5.   <View style={container}>
  6.     <Text style={text}>React Native</Text>
  7.   </View>
  8. );
  10. const page = StyleSheet.create({
  11.   container: {
  12.     flex: 1,
  13.     padding: 24,
  14.     backgroundColor: '#fff',
  15.   },
  16.   text: {
  17.     fontSize: 30,
  18.     color: '#000'
  19.   },
  20. });
  22. const lists = StyleSheet.create({
  23.   listContainer: {
  24.     flex: 1,
  25.     paddingTop: 50,
  26.     backgroundColor: '#61dafb',
  27.   },
  28.   listItem: {
  29.     fontStyle: 'italic',
  30.     fontWeight: 'bold'
  31.   },
  32. });
  34. const container = StyleSheet.compose(page.container, lists.listContainer);
  35. const text = StyleSheet.compose(page.text, lists.listItem);
  37. export default App;

User Interface

Button

  1. import React from 'react';
  2. import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
  4. const Separator = () => (
  5.   <View style={styles.separator} />
  6. );
  8. const App = () => (
  9.   <SafeAreaView style={styles.container}>
  10.     <View>
  11.       <Text style={styles.title}>
  12.         The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.
  13.       </Text>
  14.       <Button
  15.         title="Press me"
  16.         onPress={() => Alert.alert('Simple Button pressed')}
  17.       />
  18.     </View>
  19.     <Separator />
  20.     <View>
  21.       <Text style={styles.title}>
  22.         Adjust the color in a way that looks standard on each platform. On  iOS, the color prop controls the color of the text. On Android, the color adjusts the background color of the button.
  23.       </Text>
  24.       <Button
  25.         title="Press me"
  26.         color="#f194ff"
  27.         onPress={() => Alert.alert('Button with adjusted color pressed')}
  28.       />
  29.     </View>
  30.     <Separator />
  31.     <View>
  32.       <Text style={styles.title}>
  33.         All interaction for the component are disabled.
  34.       </Text>
  35.       <Button
  36.         title="Press me"
  37.         disabled
  38.         onPress={() => Alert.alert('Cannot press this one')}
  39.       />
  40.     </View>
  41.     <Separator />
  42.     <View>
  43.       <Text style={styles.title}>
  44.         This layout strategy lets the title define the width of the button.
  45.       </Text>
  46.       <View style={styles.fixToText}>
  47.         <Button
  48.           title="Left button"
  49.           onPress={() => Alert.alert('Left button pressed')}
  50.         />
  51.         <Button
  52.           title="Right button"
  53.           onPress={() => Alert.alert('Right button pressed')}
  54.         />
  55.       </View>
  56.     </View>
  57.   </SafeAreaView>
  58. );
  60. const styles = StyleSheet.create({
  61.   container: {
  62.     flex: 1,
  63.     justifyContent: 'center',
  64.     marginHorizontal: 16,
  65.   },
  66.   title: {
  67.     textAlign: 'center',
  68.     marginVertical: 8,
  69.   },
  70.   fixToText: {
  71.     flexDirection: 'row',
  72.     justifyContent: 'space-between',
  73.   },
  74.   separator: {
  75.     marginVertical: 8,
  76.     borderBottomColor: '#737373',
  77.     borderBottomWidth: StyleSheet.hairlineWidth,
  78.   },
  79. });
  81. export default App;

Switch

  1. import React, { useState } from "react";
  2. import { View, Switch, StyleSheet, Button } from "react-native";
  4. const App = () => {
  5.   const [isEnabled, setIsEnabled] = useState(false);
  6.   const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  8.   return (
  9.     <View style={styles.container}>
  10.       <Button 
  11.         disabled={!isEnabled} 
  12.         title={isEnabled? 'Enabled' : 'Disabled'} />
  13.       <Switch
  14.         trackColor={{ false: "#767577", true: "#81b0ff" }}
  15.         thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
  16.         ios_backgroundColor="#3e3e3e"
  17.         onValueChange={toggleSwitch}
  18.         value={isEnabled}
  19.       />
  20.     </View>
  21.   );
  22. }
  24. const styles = StyleSheet.create({
  25.   container: {
  26.     flex: 1,
  27.     flexDirection: "row",
  28.     alignItems: "center",
  29.     justifyContent: "space-between",
  30.     marginLeft: 10,
  31.     marginRight: 10,
  32.   },
  33.   button: {
  34.     alignItems: 'center',
  35.     backgroundColor: '#DDDDDD',
  36.     padding: 10,
  37.     marginBottom: 10
  38.   }
  39. });
  41. export default App;

List Views

FlatList

  1. import React from 'react';
  2. import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
  4. const DATA = [
  5.   {
  6.     id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
  7.     title: 'First Item',
  8.   },
  9.   {
  10.     id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
  11.     title: 'Second Item',
  12.   },
  13.   {
  14.     id: '58694a0f-3da1-471f-bd96-145571e29d72',
  15.     title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do \
  16.     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad \
  17.     minim veniam, quis nostrud exercitation ullamco laboris nisi ut \
  18.     aliquip ex ea commodo consequat. Duis aute irure dolor in \
  19.     reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla \
  20.     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in \
  21.     culpa qui officia deserunt mollit anim id est laborum. \
  22.     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do \
  23.     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad \
  24.     minim veniam, quis nostrud exercitation ullamco laboris nisi ut \
  25.     aliquip ex ea commodo consequat. Duis aute irure dolor in \
  26.     reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla \
  27.     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in \
  28.     culpa qui officia deserunt mollit anim id est laborum. \
  29.     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do \
  30.     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad \
  31.     minim veniam, quis nostrud exercitation ullamco laboris nisi ut \
  32.     aliquip ex ea commodo consequat. Duis aute irure dolor in \
  33.     reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla \
  34.     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in \
  35.     culpa qui officia deserunt mollit anim id est laborum.',
  36.   },
  37. ];
  39. const Item = ({ title }) => (
  40.   <View style={styles.item}>
  41.     <Text style={styles.title}>{title}</Text>
  42.   </View>
  43. );
  45. const App = () => {
  46.   const renderItem = ({ item }) => (
  47.     <Item title={item.title} />
  48.   );
  50.   return (
  51.     <SafeAreaView style={styles.container}>
  52.       <FlatList
  53.         data={DATA}
  54.         renderItem={renderItem}
  55.         keyExtractor={item => item.id}
  56.       />
  57.     </SafeAreaView>
  58.   );
  59. }
  61. const styles = StyleSheet.create({
  62.   container: {
  63.     flex: 1,
  64.     marginTop: StatusBar.currentHeight || 0,
  65.   },
  66.   item: {
  67.     backgroundColor: '#f9c2ff',
  68.     padding: 20,
  69.     marginVertical: 8,
  70.     marginHorizontal: 16,
  71.   },
  72.   title: {
  73.     fontSize: 32,
  74.   },
  75. });
  77. export default App;

SectionList

  1. import React from "react";
  2. import { StyleSheet, Text, View, SafeAreaView, SectionList, StatusBar } from "react-native";
  4. const DATA = [
  5.   {
  6.     title: "Main dishes",
  7.     data: ["Pizza", "Burger", "Risotto"]
  8.   },
  9.   {
  10.     title: "Sides",
  11.     data: ["French Fries", "Onion Rings", "Fried Shrimps"]
  12.   },
  13.   {
  14.     title: "Drinks",
  15.     data: ["Water", "Coke", "Beer"]
  16.   },
  17.   {
  18.     title: "Desserts",
  19.     data: ["Cheese Cake", "Ice Cream"]
  20.   }
  21. ];
  23. const Item = ({ title }) => (
  24.   <View style={styles.item}>
  25.     <Text style={styles.title}>{title}</Text>
  26.   </View>
  27. );
  29. const App = () => (
  30.   <SafeAreaView style={styles.container}>
  31.     <SectionList
  32.       sections={DATA}
  33.       keyExtractor={(item, index) => item + index}
  34.       renderItem={({ item }) => <Item title={item} />}
  35.       renderSectionHeader={({ section: { title } }) => (
  36.         <Text style={styles.header}>{title}</Text>
  37.       )}
  38.     />
  39.   </SafeAreaView>
  40. );
  42. const styles = StyleSheet.create({
  43.   container: {
  44.     flex: 1,
  45.     paddingTop: StatusBar.currentHeight,
  46.     marginHorizontal: 16
  47.   },
  48.   item: {
  49.     backgroundColor: "#f9c2ff",
  50.     padding: 20,
  51.     marginVertical: 8
  52.   },
  53.   header: {
  54.     fontSize: 32,
  55.     backgroundColor: "#fff"
  56.   },
  57.   title: {
  58.     fontSize: 24
  59.   }
  60. });
  62. export default App;

Others

ActivityIndicator

  1. import React from "react";
  2. import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
  4. const App = () => (
  5.   <View style={[styles.container, styles.horizontal]}>
  6.     <ActivityIndicator />
  7.     <ActivityIndicator size="large" />
  8.     <ActivityIndicator size="small" color="#0000ff" />
  9.     <ActivityIndicator size="large" color="#00ff00" />
  10.   </View>
  11. );
  13. const styles = StyleSheet.create({
  14.   container: {
  15.     flex: 1,
  16.     justifyContent: "center"
  17.   },
  18.   horizontal: {
  19.     flexDirection: "row",
  20.     justifyContent: "space-around",
  21.     padding: 10
  22.   }
  23. });
  25. export default App;

Alert

  1. import React, { useState } from "react";
  2. import { View, StyleSheet, Button, Alert } from "react-native";
  4. const App = () => {
  5.   const createTwoButtonAlert = () =>
  6.     Alert.alert(
  7.       "Alert Title",
  8.       "My Alert Msg",
  9.       [
  10.         {
  11.           text: "Cancel",
  12.           onPress: () => console.log("Cancel Pressed"),
  13.           style: "cancel"
  14.         },
  15.         { text: "OK", onPress: () => console.log("OK Pressed") }
  16.       ]
  17.     );
  19.   const createThreeButtonAlert = () =>
  20.     Alert.alert(
  21.       "Alert Title",
  22.       "My Alert Msg",
  23.       [
  24.         {
  25.           text: "Ask me later",
  26.           onPress: () => console.log("Ask me later pressed")
  27.         },
  28.         {
  29.           text: "Cancel",
  30.           onPress: () => console.log("Cancel Pressed"),
  31.           style: "cancel"
  32.         },
  33.         { text: "OK", onPress: () => console.log("OK Pressed") }
  34.       ]
  35.     );
  37.   return (
  38.     <View style={styles.container}>
  39.       <Button title={"2-Button Alert"} onPress={createTwoButtonAlert} />
  40.       <Button title={"3-Button Alert"} onPress={createThreeButtonAlert} />
  41.     </View>
  42.   );
  43. }
  45. const styles = StyleSheet.create({
  46.   container: {
  47.     flex: 1,
  48.     justifyContent: "space-around",
  49.     alignItems: "center"
  50.   }
  51. });
  53. export default App;

Animated

  1. import React, { useRef } from "react";
  2. import { Animated, Text, View, StyleSheet, Button, SafeAreaView } from "react-native";
  4. const App = () => {
  5.   // fadeAnim will be used as the value for opacity. Initial Value: 0
  6.   const fadeAnim = useRef(new Animated.Value(0)).current;
  8.   const fadeIn = () => {
  9.     // Will change fadeAnim value to 1 in 5 seconds
  10.     Animated.timing(fadeAnim, {
  11.       toValue: 1,
  12.       duration: 5000,
  13.       useNativeDriver: true,
  14.     }).start();
  15.   };
  17.   const fadeOut = () => {
  18.     // Will change fadeAnim value to 0 in 3 seconds
  19.     Animated.timing(fadeAnim, {
  20.       toValue: 0,
  21.       duration: 3000,
  22.       useNativeDriver: true,
  23.     }).start();
  24.   };
  26.   return (
  27.     <SafeAreaView style={styles.container}>
  28.       <Animated.View
  29.         style={[
  30.           styles.fadingContainer,
  31.           {
  32.             // Bind opacity to animated value
  33.             opacity: fadeAnim
  34.           }
  35.         ]}
  36.       >
  37.         <Text style={styles.fadingText}>Fading View!</Text>
  38.       </Animated.View>
  39.       <View style={styles.buttonRow}>
  40.         <Button title="Fade In View" onPress={fadeIn} />
  41.         <Button title="Fade Out View" onPress={fadeOut} />
  42.       </View>
  43.     </SafeAreaView>
  44.   );
  45. }
  47. const styles = StyleSheet.create({
  48.   container: {
  49.     flex: 1,
  50.     alignItems: "center",
  51.     justifyContent: "center"
  52.   },
  53.   fadingContainer: {
  54.     padding: 20,
  55.     backgroundColor: "powderblue"
  56.   },
  57.   fadingText: {
  58.     fontSize: 28
  59.   },
  60.   buttonRow: {
  61.     flexBasis: 100,
  62.     justifyContent: "space-evenly",
  63.     marginVertical: 16
  64.   }
  65. });
  67. export default App;

Dimensions

  1. import React, { useState, useEffect } from "react";
  2. import { View, StyleSheet, Text, Dimensions } from "react-native";
  4. const window = Dimensions.get("window");
  5. const screen = Dimensions.get("screen");
  7. const App = () => {
  8.   const [dimensions, setDimensions] = useState({ window, screen });
  10.   useEffect(() => {
  11.     const subscription = Dimensions.addEventListener(
  12.       "change",
  13.       ({ window, screen }) => {
  14.         setDimensions({ window, screen });
  15.       }
  16.     );
  17.     return () => subscription?.remove();
  18.   });
  20.   return (
  21.     <View style={styles.container}>
  22.       <Text style={styles.header}>Window Dimensions</Text>
  23.       {Object.entries(dimensions.window).map(([key, value]) => (
  24.         <Text>{key} : {value}</Text>
  25.       ))}
  26.       <Text style={styles.header}>Screen Dimensions</Text>
  27.       {Object.entries(dimensions.screen).map(([key, value]) => (
  28.         <Text>{key} : {value}</Text>
  29.       ))}
  30.     </View>
  31.   );
  32. }
  34. const styles = StyleSheet.create({
  35.   container: {
  36.     flex: 1,
  37.     justifyContent: "center",
  38.     alignItems: "center"
  39.   },
  40.   header: {
  41.     fontSize: 16,
  42.     marginVertical: 10
  43.   }
  44. });
  46. export default App;

KeyboardAvoidingView

  1. import React from 'react';
  2. import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, TouchableWithoutFeedback, Button, Keyboard  } from 'react-native';
  4. const KeyboardAvoidingComponent = () => {
  5.   return (
  6.     <KeyboardAvoidingView
  7.       behavior={Platform.OS === "ios" ? "padding" : "height"}
  8.       style={styles.container}
  9.     >
  10.       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
  11.         <View style={styles.inner}>
  12.           <Text style={styles.header}>Header</Text>
  13.           <TextInput placeholder="Username" style={styles.textInput} />
  14.           <View style={styles.btnContainer}>
  15.             <Button title="Submit" onPress={() => null} />
  16.           </View>
  17.         </View>
  18.       </TouchableWithoutFeedback>
  19.     </KeyboardAvoidingView>
  20.   );
  21. };
  23. const styles = StyleSheet.create({
  24.   container: {
  25.     flex: 1
  26.   },
  27.   inner: {
  28.     padding: 24,
  29.     flex: 1,
  30.     justifyContent: "space-around"
  31.   },
  32.   header: {
  33.     fontSize: 36,
  34.     marginBottom: 48
  35.   },
  36.   textInput: {
  37.     height: 40,
  38.     borderColor: "#000000",
  39.     borderBottomWidth: 1,
  40.     marginBottom: 36
  41.   },
  42.   btnContainer: {
  43.     backgroundColor: "white",
  44.     marginTop: 12
  45.   }
  46. });
  48. export default KeyboardAvoidingComponent;

Linking

https://reactnative.dev/docs/linking

Modal

  1. import React, { useState } from "react";
  2. import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";
  4. const App = () => {
  5.   const [modalVisible, setModalVisible] = useState(false);
  6.   return (
  7.     <View style={styles.centeredView}>
  8.       <Modal
  9.         animationType="slide"
  10.         transparent={true}
  11.         visible={modalVisible}
  12.         onRequestClose={() => {
  13.           Alert.alert("Modal has been closed.");
  14.           setModalVisible(!modalVisible);
  15.         }}
  16.       >
  17.         <View style={styles.centeredView}>
  18.           <View style={styles.modalView}>
  19.             <Text style={styles.modalText}>Hello World!</Text>
  20.             <Pressable
  21.               style={[styles.button, styles.buttonClose]}
  22.               onPress={() => setModalVisible(!modalVisible)}
  23.             >
  24.               <Text style={styles.textStyle}>Hide Modal</Text>
  25.             </Pressable>
  26.           </View>
  27.         </View>
  28.       </Modal>
  29.       <Pressable
  30.         style={[styles.button, styles.buttonOpen]}
  31.         onPress={() => setModalVisible(true)}
  32.       >
  33.         <Text style={styles.textStyle}>Show Modal</Text>
  34.       </Pressable>
  35.     </View>
  36.   );
  37. };
  39. const styles = StyleSheet.create({
  40.   centeredView: {
  41.     flex: 1,
  42.     justifyContent: "center",
  43.     alignItems: "center",
  44.     marginTop: 22
  45.   },
  46.   modalView: {
  47.     margin: 20,
  48.     backgroundColor: "white",
  49.     borderRadius: 20,
  50.     padding: 35,
  51.     alignItems: "center",
  52.     shadowColor: "#000",
  53.     shadowOffset: {
  54.       width: 0,
  55.       height: 2
  56.     },
  57.     shadowOpacity: 0.25,
  58.     shadowRadius: 4,
  59.     elevation: 5
  60.   },
  61.   button: {
  62.     borderRadius: 20,
  63.     padding: 10,
  64.     elevation: 2
  65.   },
  66.   buttonOpen: {
  67.     backgroundColor: "#F194FF",
  68.   },
  69.   buttonClose: {
  70.     backgroundColor: "#2196F3",
  71.   },
  72.   textStyle: {
  73.     color: "white",
  74.     fontWeight: "bold",
  75.     textAlign: "center"
  76.   },
  77.   modalText: {
  78.     marginBottom: 15,
  79.     textAlign: "center"
  80.   }
  81. });
  83. export default App;

PixelRatio

  1. var image = getImage({
  2.   width: PixelRatio.getPixelSizeForLayoutSize(200),
  3.   height: PixelRatio.getPixelSizeForLayoutSize(100)
  4. });
  5. <Image source={image} style={{ width: 200, height: 100 }} />;
  1. import React from "react";
  2. import { Image, PixelRatio, ScrollView, StyleSheet, Text, View, Dimensions } from "react-native";
  4. const size = 50;
  5. const cat = {
  6.   uri: "https://reactnative.dev/docs/assets/p_cat1.png",
  7.   width: size,
  8.   height: size
  9. };
  11. const screen = Dimensions.get("screen");
  13. const App = () => (
  14.   <View style={{flex:1,paddingTop:0}}>
  15.   <ScrollView 
  16.     style={styles.scrollStyle}
  17.     contentContainerStyle={styles.contentContainerStyle}
  18.   >
  19.     <View style={styles.container}>
  20.       <Text>Current Pixel Ratio is:</Text>
  21.       <Text style={styles.value}>{PixelRatio.get()}</Text>
  22.     </View>
  23.     <View style={styles.container}>
  24.       <Text>Current Font Scale is:</Text>
  25.       <Text style={styles.value}>{PixelRatio.getFontScale()}</Text>
  26.     </View>
  27.     <View style={styles.container}>
  28.       <Text>On this device images with a layout width of</Text>
  29.       <Text style={styles.value}>{size} px</Text>
  30.       <Image source={cat} />
  31.     </View>
  32.     <View style={styles.container}>
  33.       <Text>require images with a pixel width of</Text>
  34.       <Text style={styles.value}>
  35.         {PixelRatio.getPixelSizeForLayoutSize(size)} px
  36.       </Text>
  37.       <Image
  38.         source={cat}
  39.         style={{
  40.           width: PixelRatio.getPixelSizeForLayoutSize(size),
  41.           height: PixelRatio.getPixelSizeForLayoutSize(size)
  42.         }}
  43.       />
  44.     </View>
  45.   </ScrollView>
  46.   </View>
  47. );
  49. const styles = StyleSheet.create({
  50.   scrollStyle: {
  51.     flex:1,
  52.   },
  53.   contentContainerStyle: {
  54.     flex:1,
  55.     justifyContent: "center",
  56.   },
  57.   container: {
  58.     justifyContent: "center",
  59.     alignItems: "center"
  60.   },
  61.   value: {
  62.     fontSize: 24,
  63.     marginBottom: 12,
  64.     marginTop: 4
  65.   }
  66. });
  68. export default App;

RefreshControl

  1. import React from 'react';
  2. import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
  4. const wait = (timeout: number) => {
  5.   return new Promise(resolve => setTimeout(resolve, timeout));
  6. }
  8. const App = () => {
  9.   const [refreshing, setRefreshing] = React.useState(false);
  11.   const onRefresh = React.useCallback(() => {
  12.     setRefreshing(true);
  13.     wait(2000).then(() => setRefreshing(false));
  14.   }, []);
  16.   return (
  17.     <SafeAreaView style={styles.container}>
  18.       <ScrollView
  19.         contentContainerStyle={styles.scrollView}
  20.         refreshControl={
  21.           <RefreshControl
  22.             refreshing={refreshing}
  23.             onRefresh={onRefresh}
  24.           />
  25.         }
  26.       >
  27.         <Text>Pull down to see RefreshControl indicator</Text>
  28.       </ScrollView>
  29.     </SafeAreaView>
  30.   );
  31. }
  33. const styles = StyleSheet.create({
  34.   container: {
  35.     flex: 1,
  36.   },
  37.   scrollView: {
  38.     flex: 1,
  39.     backgroundColor: 'pink',
  40.     alignItems: 'center',
  41.     justifyContent: 'center',
  42.   },
  43. });
  45. export default App;

StatusBar

  1. import React, { useState } from 'react';
  2. import { Button, Platform, SafeAreaView, StatusBar, StyleSheet, Text, View } from 'react-native';
  4. const STYLES = ['default', 'dark-content', 'light-content'];
  5. const TRANSITIONS = ['fade', 'slide', 'none'];
  7. const App = () => {
  8.   const [hidden, setHidden] = useState(false);
  9.   const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
  10.   const [statusBarTransition, setStatusBarTransition] = useState(TRANSITIONS[0]);
  12.   const changeStatusBarVisibility = () => setHidden(!hidden);
  14.   const changeStatusBarStyle = () => {
  15.     const styleId = STYLES.indexOf(statusBarStyle) + 1;
  16.     if (styleId === STYLES.length) {
  17.       setStatusBarStyle(STYLES[0]);
  18.     } else {
  19.       setStatusBarStyle(STYLES[styleId]);
  20.     }
  21.   };
  23.   const changeStatusBarTransition = () => {
  24.     const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
  25.     if (transition === TRANSITIONS.length) {
  26.       setStatusBarTransition(TRANSITIONS[0]);
  27.     } else {
  28.       setStatusBarTransition(TRANSITIONS[transition]);
  29.     }
  30.   };
  32.   return (
  33.     <View style={styles.container}>
  34.       <StatusBar
  35.         animated={true}
  36.         backgroundColor="#61dafb"
  37.         barStyle={statusBarStyle}
  38.         showHideTransition={statusBarTransition}
  39.         hidden={hidden} />
  40.       <Text style={styles.textStyle}>
  41.         StatusBar Visibility:{'\n'}
  42.         {hidden ? 'Hidden' : 'Visible'}
  43.       </Text>
  44.       <Text style={styles.textStyle}>
  45.         StatusBar Style:{'\n'}
  46.         {statusBarStyle}
  47.       </Text>
  48.       {Platform.OS === 'ios' ? (
  49.         <Text style={styles.textStyle}>
  50.           StatusBar Transition:{'\n'}
  51.           {statusBarTransition}
  52.         </Text>
  53.       ) : null}
  54.       <View style={styles.buttonsContainer}>
  55.         <Button
  56.           title="Toggle StatusBar"
  57.           onPress={changeStatusBarVisibility} />
  58.         <Button
  59.           title="Change StatusBar Style"
  60.           onPress={changeStatusBarStyle} />
  61.         {Platform.OS === 'ios' ? (
  62.           <Button
  63.             title="Change StatusBar Transition"
  64.             onPress={changeStatusBarTransition} />
  65.         ) : null}
  66.       </View>
  67.     </View>
  68.   );
  69. };
  71. const styles = StyleSheet.create({ 
  72.   container: {
  73.     flex: 1,
  74.     justifyContent: 'center',
  75.     backgroundColor: '#ECF0F1'
  76.   },
  77.   buttonsContainer: {
  78.     padding: 10
  79.   },
  80.   textStyle: {
  81.     textAlign: 'center',
  82.     marginBottom: 8
  83.   }
  84. });
  86. export default App;