Footers
Build Better User Experiences with Our Pre-made Footer Components for React Native Apps
-
Simple Footer with Multiple Actions
-
Simple Footer with Single Action
-
Simple Footer with Single Action and Metadata
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
<View>
<Text style={styles.text}>in voluptate velit esse cillum dolore eu fugiat nulla</Text>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
},
scrollView: {
backgroundColor: 'pink',
marginHorizontal: 20,
},
text: {
fontSize: 42,
},
});
export default App;
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
<View>
<Text style={styles.text}>in voluptate velit esse cillum dolore eu fugiat nulla</Text>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
},
scrollView: {
backgroundColor: 'pink',
marginHorizontal: 20,
},
text: {
fontSize: 42,
},
});
export default App;
import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
export default function Example() {
return (
<View style={{ flex: 1 }}>
<View style={styles.placeholder}>
<View style={styles.placeholderInset}>
{/* Replace with your content */}
</View>
</View>
<View style={styles.overlay}>
<View />
<TouchableOpacity
onPress={() => {
// handle onPress
}}>
<View style={styles.btn}>
<Text style={styles.btnText}>Next</Text>
<MaterialCommunityIcons
color="#fff"
name="arrow-right"
size={18}
style={{ marginLeft: 12 }} />
</View>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
overlay: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
backgroundColor: '#fff',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingTop: 12,
paddingHorizontal: 16,
paddingBottom: 48,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
},
/** Placeholder */
placeholder: {
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
height: 400,
marginTop: 60,
padding: 24,
backgroundColor: '#F3F4F6',
},
placeholderInset: {
borderWidth: 4,
borderColor: '#CFD1D4',
borderStyle: 'dashed',
borderRadius: 9,
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
},
/** Button */
btn: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 8,
paddingVertical: 10,
paddingHorizontal: 20,
borderWidth: 1,
backgroundColor: '#5FBC39',
borderColor: '#5FBC39',
},
btnText: {
fontSize: 18,
lineHeight: 26,
fontWeight: '600',
color: '#fff',
},
});import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
export default function Example() {
return (
<View style={{ flex: 1 }}>
<View style={styles.placeholder}>
<View style={styles.placeholderInset}>
{/* Replace with your content */}
</View>
</View>
<View style={styles.overlay}>
<View />
<TouchableOpacity
onPress={() => {
// handle onPress
}}>
<View style={styles.btn}>
<Text style={styles.btnText}>Next</Text>
<MaterialCommunityIcons
color="#fff"
name="arrow-right"
size={18}
style={{ marginLeft: 12 }} />
</View>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
overlay: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
backgroundColor: '#fff',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingTop: 12,
paddingHorizontal: 16,
paddingBottom: 48,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
},
/** Placeholder */
placeholder: {
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
height: 400,
marginTop: 60,
padding: 24,
backgroundColor: '#F3F4F6',
},
placeholderInset: {
borderWidth: 4,
borderColor: '#CFD1D4',
borderStyle: 'dashed',
borderRadius: 9,
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
},
/** Button */
btn: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 8,
paddingVertical: 10,
paddingHorizontal: 20,
borderWidth: 1,
backgroundColor: '#5FBC39',
borderColor: '#5FBC39',
},
btnText: {
fontSize: 18,
lineHeight: 26,
fontWeight: '600',
color: '#fff',
},
});
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
<View>
<Text style={styles.text}>in voluptate velit esse cillum dolore eu fugiat nulla</Text>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
},
scrollView: {
backgroundColor: 'pink',
marginHorizontal: 20,
},
text: {
fontSize: 42,
},
});
export default App;
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
<View>
<Text style={styles.text}>in voluptate velit esse cillum dolore eu fugiat nulla</Text>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
},
scrollView: {
backgroundColor: 'pink',
marginHorizontal: 20,
},
text: {
fontSize: 42,
},
});
export default App;