Button
A basic button component that should render nicely on any
platform. Supports a minimal level of customization.
If this button doesn't look right for your app, you can build your
own button using Pressable. For inspiration, look at the source
code for the Button component.
import React from 'react';
import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const Separator = () => <View style={[Link]} />;
function showAlert(message) {
if ([Link] === 'web') {
[Link](message);
} else {
[Link](message);
}
}
const App = () => (
<SafeAreaProvider>
<SafeAreaView style={[Link]}>
<View>
<Text style={[Link]}>
The title and onPress handler are required. It is recommended to set
accessibilityLabel to help make your app usable by everyone.
</Text>
<Button
title="Press me"
onPress={() => showAlert('Simple Button pressed')}
/>
</View>
<Separator />
<View>
<Text style={[Link]}>
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.
</Text>
<Button
title="Press me"
color="#f194ff"
onPress={() => showAlert('Button with adjusted color pressed')}
/>
</View>
<Separator />
<View>
<Text style={[Link]}>
All interaction for the component are disabled.
</Text>
<Button
title="Press me"
disabled
onPress={() => showAlert('Cannot press this one')}
/>
</View>
<Separator />
<View>
<Text style={[Link]}>
This layout strategy lets the title define the width of the button.
</Text>
<View style={[Link]}>
<Button
title="Left button"
onPress={() => showAlert('Left button pressed')}
/>
<Button
title="Right button"
onPress={() => showAlert('Right button pressed')}
/>
</View>
</View>
</SafeAreaView>
</SafeAreaProvider>
);
const styles = [Link]({
container: {
flex: 1,
justifyContent: 'center',
marginHorizontal: 16,
},
title: {
textAlign: 'center',
marginVertical: 8,
},
fixToText: {
flexDirection: 'row',
justifyContent: 'space-between',
},
separator: {
marginVertical: 8,
borderBottomColor: '#737373',
borderBottomWidth: [Link],
},
});
export default App;
Image
A React component for displaying different types of images,
including network images, static resources, temporary local
images, and images from local disk, such as the camera roll.
This example shows fetching and displaying an image from local
storage as well as one from network and even from data
provided in the 'data:' uri scheme.
import React from 'react';
import {Image, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const styles = [Link]({
container: {
flex: 1,
},
tinyLogo: {
width: 50,
height: 50,
},
logo: {
width: 66,
height: 58,
},
});
const DisplayAnImage = () => (
<SafeAreaProvider>
<SafeAreaView style={[Link]}>
<Image
style={[Link]}
source={require('@expo/snack-static/[Link]')}
/>
<Image
style={[Link]}
source={{
uri: '[Link]
}}
/>
<Image
style={[Link]}
source={{
uri:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHR
Tb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQ
YGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAA
BJRU5ErkJggg==',
}}
/>
</SafeAreaView>
</SafeAreaProvider>
);
export default DisplayAnImage;
ImageBackground
A common feature request from developers familiar with the
web is background-image. To handle this use case, you can use
the <ImageBackground> component, which has the same props
as <Image>, and add whatever children to it you would like to
layer on top of it.
You might not want to use <ImageBackground> in some cases, since
the implementation is basic. Refer to <ImageBackground>'s source
code for more insight, and create your own custom component
when needed.
Note that you must specify some width and height style
attributes.
Example
import React from 'react';
import {ImageBackground, StyleSheet, Text} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const image = {uri: '[Link]
const App = () => (
<SafeAreaProvider>
<SafeAreaView style={[Link]} edges={['left', 'right']}>
<ImageBackground source={image} resizeMode="cover" style={[Link]}>
<Text style={[Link]}>Inside</Text>
</ImageBackground>
</SafeAreaView>
</SafeAreaProvider>
);
const styles = [Link]({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: 'center',
},
text: {
color: 'white',
fontSize: 42,
lineHeight: 84,
fontWeight: 'bold',
textAlign: 'center',
backgroundColor: '#000000c0',
},
});
export default App;