react-native SafeAreaView JavaScript Examples

Source File: index.js From bluezone-app with GNU General Public License v3.0

6 votes

render() {
    const {news} = this.state;
    const {route} = this.props;
    const item = (route && route.params.item) || {};
    const {Language} = configuration;
    //
    const title =
      (Language === 'vi' ? item.title : item.titleEn) ||
      item.title ||
      item.titleEn;

    return (
      <SafeAreaView style={{flex: 1, backgroundColor: '#ffffff'}}>
        <Header
          colorIcon={'#000000'}
          styleHeader={{marginTop: 20}}
          styleTitle={{paddingHorizontal: 50}}
          title={title}
        />
        <ScrollView>
          <HTML
            html={news?.data?.content}
            tagsStyles={CUSTOM_STYLES}
            imagesMaxWidth={Dimensions.get('window').width}
            allowFontScaling={false}
          />
        </ScrollView>
      </SafeAreaView>
    );
  }

Source File: NoCards.js From universal-verifier-app with GNU General Public License v3.0

6 votes

render() {
		return (
			<SafeAreaView style={styles.container} backgroundColor={this.props.colors.background}>
        <View style={styles.card} borderColor={this.props.colors.divisor} >
						<Divider style={[styles.cardTopDivisor]} borderColor={this.props.colors.divisor} />
						<View style={styles.bottomContainer}>
							<View style={styles.column1}>
								<View style={styles.leftSquare} borderColor={this.props.colors.divisor} />
							</View>
        			<View style={styles.column2}>
								<Divider style={[styles.line, styles.lineRound, styles.lineShort]} borderColor={this.props.colors.divisor} />
								<Divider style={[styles.line, styles.lineRound]} borderColor={this.props.colors.divisor} />
								<Divider style={[styles.line, styles.lineRound]} borderColor={this.props.colors.divisor} />
							</View>
						</View>
				</View>

				<Text style={[styles.notes,{color:this.props.colors.divisor}]}>Passports you scan will appear here.</Text>
			</SafeAreaView>
		);
	}

Source File: index.js From guardioes-app with Apache License 2.0

6 votes

ScreenLoader = () => {
    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: '#348EAC' }}>
            <Screen>
                <Spinner type='ThreeBounce' size={scale(72)} color='#348EAC' />
            </Screen>
        </SafeAreaView>
    )
}

Source File: KeyboardAvoidingViewScreen.js From monsuivipsy with Apache License 2.0

6 votes

ScreenContainer = ({children}) => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{flex: 1}}>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          keyboardShouldPersistTaps="handled">
          {children}
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

Source File: ResultScreen.js From adyen-react-native-online-payments with MIT License

6 votes

export default function ResultScreen({ route, navigation }) {
  const { params } = route.params;

  const goHome = () => {
    navigation.navigate("Root");
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text>Payment result: {params.resultCode.toUpperCase()}</Text>

      <View style={styles.buttonContainer}>
        <Button
          onPress={goHome}
          title="Home"
          color="#0ABF53"
          accessibilityLabel="Back to Home"
        />
      </View>
    </SafeAreaView>
  );
}

Source File: index.js From React-Native-Boilerplate with MIT License

6 votes

App = () => {
  useEffect(() => {
    console.disableYellowBox = true;
    if (Platform.OS == 'android') {
      SplashScreen.hide();
    }
  }, []);

  return (
    <Suspense fallback={null}>
      <Root>
        <SafeAreaView style={styles.container}>
          <PaperProvider>
            <AppStateProvider>
              <NavigationContainer theme={theme}>
                <AppNavigator />
                <PushNotification />
                <DropdownAlert ref={(ref) => DropDownHolder.setDropDown(ref)} />
              </NavigationContainer>
            </AppStateProvider>
          </PaperProvider>
        </SafeAreaView>
      </Root>
    </Suspense>
  );
}

Source File: index.js From rn-cartoon-app with MIT License

6 votes

function Index(props) {

  const {
    navigation
  } = props;
  const headerProps = {
    title: '关于我',
    navigation,
  }
  return (
    <SafeAreaView style={styles.wrapper}>
      <Header {...headerProps} />
      <View style={styles.body}>
        <View style={styles.description}>
          <View>
            <Text style={styles.text}> 致疯狂的人：</Text>
          </View>
          <View style={styles.textWrapper}>
            <Text style={styles.text}>   他们特立独行，他们桀骜不驯，他们惹事生非，他们格格不入，他们用与众不同的眼光看待事物。</Text>
          </View>
          <View style={styles.textWrapper}>
            <Text style={styles.text}> 他们不喜欢墨守成规。他们也不安于现状。你可以认同他们，反对他们，颂扬或是诋毁他们。但唯独不能漠视他们。因为他们改变了寻常事物。他们推动人类向前迈进。</Text>
          </View>
          <View style={styles.textWrapper}>
            <Text style={styles.text}>  或许他们是别人眼里的疯子，但他们却是我们眼中的天才。因为只有那些疯狂到以为自己能够改变世界的人，才能真正改变世界。</Text>
          </View>
        </View>
        <Image style={{ width: 200, height: 200 }} source={require('../../assets/img/mine/avatar.gif')} />
      </View>
    </SafeAreaView>
  )
}

Source File: ForgotPasswordScreen.js From react-native-booking-app with MIT License

6 votes

render() {
        const {goBack} = this.props.navigation;
        return (
            <SafeAreaView style={{flex: 1,}}>
                <KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
                    enableAutomaticScroll={(Platform.OS === 'ios')}>
                        <Image source={require('../../assets/images/authBackground.png')} style={styles.backgroundContainer}/>
                    <Spinner
                        visible={this.state.spinner}
                        textContent={'Please wait...'}
                        overlayColor="rgba(0, 0, 0, 0.5)"
                        textStyle={{color: 'white'}}
                    />
                    <View style={styles.logoContainer}>
                        <Image source={require('../../assets/images/logo.png')} style={styles.logo}/>
                    </View>
                    <View style={styles.inputContainer}>
                        <Text style={styles.subtitle}>Please enter your email address</Text>
                        <Input inputContainerStyle={styles.inputStyle}
                               leftIcon={<Icon name="envelope" style={styles.iconSmallStyle} />}
                               inputStyle={styles.inputInnerStyle}
                               placeholder="Email" autoCapitalize="none" keyboardType="email-address"
                               onChangeText={(email) => { this.setState({email}); }}
                               value={this.state.email}
                               errorMessage={this.state.errorMessage} errorStyle={{paddingLeft: 20}} />
                    </View>
                    <View style={styles.buttonsContainer}>
                        <Button raised buttonStyle={styles.backButton} title="Back" onPress={() => goBack()} />
                        <Button raised buttonStyle={styles.loginButton} title="Send" onPress={this.onSend} />
                    </View>
                </KeyboardAwareScrollView>
            </SafeAreaView>
        );
    }

Source File: HomeScreen.js From geometry_3d with MIT License

6 votes

HomeScreen = () => {
  return (
    <SafeAreaView>
      {/*<AdMobBanner
        bannerSize="fullBanner"
        adUnitID={adUnitID} // Test ID, Replace with your-admob-unit-id
        servePersonalizedAds={true} // true or false
        onDidFailToReceiveAdWithError={() => {
          console.log("CANT");
        }}
      />*/}

      <AnimatedObjectList
        data={cards}
        cardW={CARD_WIDTH}
        cardH={CARD_HEIGHT}
        isHorizontal={false}
        _eventEmitter={null}
      />
    </SafeAreaView>
  );
}

Source File: WorldMap.js From covid-19-app with MIT License

6 votes

WorldMap = props => {
    const
        { state, dispatch } = useContext(Context),
        [markerList, setMarkers] = useState([])

    renderMarkers = (c, i) => <MapMarker key={i} data={c} />

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <MapView
                customMapStyle={styles.map.mapStyle}
                onMapReady={() => setMarkers([...state.mapData])}
                mapType="standard"
                provider="google"
                style={{ flex: 1 }}
            >

                {
                    markerList.length != 0 ?
                        markerList.map(renderMarkers) : null
                }

            </MapView>
        </SafeAreaView>
    )
}

Source File: App.js From react-native-read-more with MIT License

6 votes

App = () => {
  return (
    <SafeAreaView style={styles.safe}>
      <View style={styles.root}>
        <ReadMore numberOfLines={3} style={styles.textStyle}>
          {
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
          }
        </ReadMore>
      </View>
    </SafeAreaView>
  );
}

Source File: SignInScreen.js From React-Navigation-5-Login-Animation-Demo with GNU General Public License v3.0

6 votes

function SignInScreen() {
  const dispatch = useDispatch();

  const _loginPressed = () => {
    let loginData = {username: 'Tony', token: '123359595'};
    AsyncStorage.setItem('data', JSON.stringify(loginData));
    dispatch(updateUser(loginData));
  };

  return (
    <View style={styles.container}>
      <SafeAreaView>
        <View style={styles.viewContainer}>
          <Image source={require('../../assets/images/ic_logo.png')} style={styles.appImage} />
          <Text style={styles.proceedLoginText}>Proceed with your </Text>
          <Text style={styles.loginText}>Login </Text>
          <TextField label="Username" containerStyle={styles.userNameTextfield} />
          <TextField label="Password" />
          <TouchableOpacity
            onPress={() => {
              _loginPressed();
            }}
            style={styles.loginButton}>
            <Text style={styles.loginButtonText}>Login</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.forgotPassowrdButton}>
            <Text style={styles.forgotPasswordButtonText}>Forgot password?</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    </View>
  );
}

Source File: Header.js From hero with MIT License

6 votes

Header = ({ title, backbutton, navigation }) => {
  if (backbutton) {
    return (
      <View style={styles.headerContainer}>
        <SafeAreaView style={styles.header}>
          <BackButton navigation={navigation} />
          <Text style={styles.appTitle}>{title}</Text>
        </SafeAreaView>
      </View>
    );
  } else {
    return (
      <SafeAreaView style={styles.headerNoBackButton}>
        <Text style={styles.appTitle}>{title}</Text>
      </SafeAreaView>
    );
  }
}

Source File: CustomScreenContainer.js From react-native-otp-login with MIT License

6 votes

CustomScreenContainer = props => {
  const {children} = props;

  return (
    <>
      <StatusBar barStyle="light-content" />
      <SafeAreaView style={GenericStyles.whiteBackgroundContainer}>
        {children}
      </SafeAreaView>
    </>
  );
}

Source File: index.js From react-native-gesture-bottom-sheet with MIT License

6 votes

Example = () => {
  const bottomSheet = useRef();
  return (
    <SafeAreaView style={styles.container}>
      <BottomSheet
        draggable={false}
        hasDraggableIcon
        ref={bottomSheet}
        height={350}>
        <View>
          <Text>Test</Text>
        </View>
      </BottomSheet>
      <TouchableOpacity
        style={styles.button}
        onPress={() => bottomSheet.current.show()}>
        <Text style={styles.text}>Open modal</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

Source File: Loading.js From ultimate-hackathon-starting-guide with MIT License

6 votes

export default function Loading() {
    return (
        <>
        <StatusBar barStyle='dark-content' />
        <SafeAreaView style={{flex : 1, backgroundColor: "#00FF00", alignItems: 'center', justifyContent: "center"}}>
            <Text>loading lol</Text>
        </SafeAreaView>
    </>
    );
}

Source File: CardView2.js From rn-animation with MIT License

6 votes

render () {
    return (
      <View style={styles.container}>
        <SafeAreaView style={{ backgroundColor: Colors.accent.general }}/>
        <Header title={'Card View2'}
                isColor={true}
        />

        <Animated.FlatList
          scrollEventThrottle={16}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { x: this.scrollX } } }],
            { useNativeDriver: true },
          )}
          data={DummyCardImage}
          style={{ flex: 1 }}
          renderItem={this._renderItem}
          keyExtractor={(item, index) => item.key + index}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          pagingEnabled={true}
        />
        <SafeAreaView/>

      </View>
    );
  }

Source File: Header.js From lx-music-mobile with Apache License 2.0

6 votes

Header = state => {
  return (
    <View style={style.header}>
      <StatusBar />
      <SafeAreaView style={style.container}>
        {state.menu.map((item, index) => <View style={style.btn} key={item.id}><Text style={style.btnText} onPress={() => this.handlePress(item, index)}>{item.name}</Text></View>)}
      </SafeAreaView>
    </View>
  )
}

Source File: MultiSelectList.jsx From react-native-big-list with Apache License 2.0

6 votes

SelectList = () => {
  const [selected, setSelected] = useState([]);

  const onSelect = (value, isSelected) => {
    if (!isSelected) {
      const selectedIndex = selected.indexOf(value);
      const newSelectedItems = [...selected];
      newSelectedItems.splice(selectedIndex, 1);
      setSelected(newSelectedItems);
    } else {
      setSelected([...selected, value]);
    }

    // TODO: your logics

    console.log(
      "The value",
      value,
      "is " + (isSelected ? "selected" : "unselected"),
    );
  };

  const renderItem = ({ item }) => {
    return (
      <Checkbox.Item
        mode="ios"
        label={item.title}
        status={selected.includes(item.id) ? "checked" : "unchecked"}
        onPress={() => {
          onSelect(item.id, !selected.includes(item.id));
        }}
      />
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <BigList data={data} renderItem={renderItem} rowHeight={50} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

Source File: App.js From react-native-ultimate-config with MIT License

6 votes

App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Text>{Config.HELLO}</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

Source File: AvatarPickerScreen.js From real-frontend with GNU General Public License v3.0

6 votes

render() {
    return (
      <AvatarPickerServiceComponent>
        {(props) => (
          <SafeAreaView style={{ flex: 1 }}>
            <Translation>
              {(t) => (
                <NavigationSecondary
                  title={t('Upload Profile Photo')}
                />
              )}
            </Translation>            

            <AvatarPickerComponent
              {...props}
            />
          </SafeAreaView>
        )}
      </AvatarPickerServiceComponent>
    )
  }

Source File: index.js From bluezone-app with GNU General Public License v3.0

5 votes

render() {
    const {intl} = this.props;
    const {data} = this.state;
    const {formatMessage} = intl;

    return (
      <SafeAreaView style={styles.warper}>
        <Header
          styleTitle={styles.titleHeader}
          title={formatMessage(message.header)}
          styleHeader={styles.header}
        />
        <View style={styles.contact}>
          <Text
            text={formatMessage(message.contact)}
            style={styles.textContact}
            onPress={this.onChangeFAQ}
          />
        </View>
        <View style={{flex: 1}}>
          <View style={styles.detailHeader}>
            <MediumText
              style={styles.textHeader}
              text={formatMessage(message.date)}
            />
            <MediumText
              style={styles.textHeader}
              text={formatMessage(message.textContact)}
            />
          </View>
          <FlatList
            style={{flex: 1}}
            ref={this.setRef}
            data={data}
            keyExtractor={item => item.dateStr}
            renderItem={this.renderItem}
          />
        </View>
      </SafeAreaView>
    );
  }

Source File: Account.js From Alfredo-Mobile with MIT License

5 votes

Account = (props) => {
  const guestView = () => {
    return (
      <ScrollView contentContainerStyle={styles.content}>
        <StatusBar backgroundColor={apply("blue-500")} barStyle='light-content' />
        <View style={styles.helloContainer}>
          <Text style={styles.helloText}>Hi!</Text>
        </View>
        <View style={styles.btnContainer}>
          <View style={apply('flex')}>
            <TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('LoginScreen')}>
              <Text style={styles.btnAuthLabel}>Login</Text>
            </TouchableOpacity>
          </View>
          <View style={apply('flex ml-5')}>
            <TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('RegisterScreen')}>
              <Text style={styles.btnAuthLabel}>Register</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    )
  }

  const userView = () => {
    const { data } = props.profile

    return (
      <ScrollView contentContainerStyle={styles.content}>
        <View style={styles.helloContainer}>
          <Text style={styles.helloText}>Hi, {data?.username}!</Text>
        </View>
        <View style={styles.btnContainer}>
          <View style={apply('flex')}>
            <TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('OrderList')}>
              <Text style={styles.btnAuthLabel}>Orders</Text>
            </TouchableOpacity>
          </View>
          <View style={apply('flex ml-5')}>
            <TouchableOpacity style={[styles.btnAuth, apply('bg-red-500')]} activeOpacity={0.9} onPress={() => props.doLogout()}>
              <Text style={styles.btnAuthLabel}>Logout</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    )
  }

  return (
    <SafeAreaView style={styles.container}>
      {props.user ? userView() : guestView()}
    </SafeAreaView>
  )
}

Source File: App.js From react-native-collapsible-tabview with MIT License

5 votes

App = () => {
  const [mode, setMode] = useState('collapsible');

  const renderDemo = () => {
    switch (mode) {
      case 'collapsible':
        return <CollapsibleTabView />;
      case 'scrollable':
        return <HeaderScrollableTabView />;
      case 'refresh':
        return <PullRefreshTabView />;
    }
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      {renderDemo()}
      <View style={styles.container}>
        {/*  collapsible */}
        <TouchableOpacity
          onPress={() => setMode('collapsible')}
          style={{...styles.button}}>
          <Text
            style={{
              textAlign: 'center',
              color: mode === 'collapsible' ? 'red' : 'black',
            }}>
            Collapsible
          </Text>
        </TouchableOpacity>
        {/* header scrollable */}
        <TouchableOpacity
          onPress={() => setMode('scrollable')}
          style={{...styles.button}}>
          <Text
            style={{
              textAlign: 'center',
              color: mode === 'scrollable' ? 'red' : 'black',
            }}>
            Header Scrollable
          </Text>
        </TouchableOpacity>
        {/* pull refresh */}
        <TouchableOpacity
          onPress={() => setMode('refresh')}
          style={{...styles.button}}>
          <Text
            style={{
              textAlign: 'center',
              color: mode === 'refresh' ? 'red' : 'black',
            }}>
            pull refresh
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

Source File: App.js From react-native-in-app-review with MIT License

5 votes

App = () => {
  return (
    <SafeAreaView style={styles.MainAppContainer}>
      <ReviewApp />
    </SafeAreaView>
  );
}

Source File: index.js From guardioes-app with Apache License 2.0

5 votes

Welcome = ({ navigation }) => {
    const showTerms = () => {
        Alert.alert(
            terms.title,
            terms.text,
            [
                {
                    text: terms.disagree,
                    onPress: () => navigation.navigate('Welcome'),
                    style: 'cancel',
                },
                {
                    text: terms.agree,
                    onPress: () => navigation.navigate('Register'),
                },
            ],
            { cancelable: false }
        )
    }

    let LogoType = GDSLogoBR

    if (translate('lang.code') === 'es') {
        LogoType = GDSLogoES
    }

    return (
        <>
            <SafeAreaView style={{ flex: 0, backgroundColor: '#5DD39E' }} />
            <StatusBar backgroundColor='#5DD39E' barStyle='light-content' />
            <GradientBackground>
                <Container>
                    <Logo source={LogoType} />
                    <WelcomeText>
                        {translate('initialscreen.welcome')}
                    </WelcomeText>

                    <Touch onPress={() => navigation.navigate('Login')}>
                        <SnowButton>
                            <Label>{translate('initialscreen.login')}</Label>
                        </SnowButton>
                    </Touch>

                    <Touch onPress={() => showTerms()}>
                        <SnowButton>
                            <Label>{translate('initialscreen.signup')}</Label>
                        </SnowButton>
                    </Touch>
                </Container>
            </GradientBackground>
        </>
    )
}

Source File: index.js From InstagramClone with MIT License

5 votes

HomeScreen = () => (
  <SafeAreaView>
    <Feed />
 </SafeAreaView>
)

Source File: daily-chart.js From monsuivipsy with Apache License 2.0

5 votes

DailyChart = ({
  route: {
    params: {day, categoryId, dayIndex},
  },
  navigation,
}) => {
  const [focused, setFocused] = useState(dayIndex);
  const [diaryDay, setDiaryDay] = useState(day);
  const [diaryData] = useContext(DiaryDataContext);

  const {firstDay} = getTodaySWeek(new Date(day));
  const chartDates = getArrayOfDates({startDate: firstDay, numberOfDays: 6});

  const setFocusedRequest = (index) => {
    setFocused(index);
    setDiaryDay(chartDates[index]);
  };

  const computeChartData = (categoryId) => {
    return chartDates.map((date) => {
      const dayData = diaryData[date];
      if (!dayData) {
        return null;
      }
      const categoryState = diaryData[date][categoryId];
      if (!categoryState) {
        return null;
      }
      if (categoryState?.value) return categoryState?.value - 1;

      // -------
      // the following code is for the retrocompatibility
      // -------

      // get the name and the suffix of the category
      const [categoryName, suffix] = categoryId.split('_');
      let categoryStateIntensity = null;
      if (suffix && suffix === 'FREQUENCE') {
        // if it's one category with the suffix 'FREQUENCE' :
        // add the intensity (default level is 3 - for the frequence 'never')
        categoryStateIntensity = diaryData[date][
          `${categoryName}_INTENSITY`
        ] || {level: 3};
        return categoryState.level + categoryStateIntensity.level - 2;
      }
      return categoryState.level - 1;
    });
  };

  const displayTitle = () => {
    const [categoryName] = categoryId.split('_');
    return displayedCategories[categoryId] || categoryName;
  };

  return (
    <SafeAreaView style={styles.safe}>
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContainer}>
        <DayTitle day={diaryDay} onBackPress={navigation.goBack} />
        <Chart
          title={displayTitle()}
          data={computeChartData(categoryId)}
          withFocus
          focused={focused}
          onPress={setFocusedRequest}
        />
        <View style={styles.spacer} />
        <DiaryItem
          date={diaryDay}
          patientState={diaryData[diaryDay]}
          navigation={navigation}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

Source File: App.js From react-native-fastlane with MIT License

5 votes

App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
}

react-native#SafeAreaView JavaScript Examples