npx react-native run-ios
Output:
The “z-index Property” heading is displayed on top of an image by utilizing its higher zIndex value (1), while the image is positioned bottom the heading with a lower zIndex value (-1).
Example: This example shows the use of the above-explained approach.
Javascript
source={{
style={styles.img}
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
position: "absolute",
margin: 40,
heading: {
zIndex: 1,
padding: 10,
borderRadius: 5,
fontSize: 20,
margin: 0,
color: "crimson",
fontWeight: "bold",
img: {
position: "absolute",
left: 0,
top: 0,
zIndex: -1,
width: 200,
height: 200,
borderRadius: 10,
export default App;
Create a Card View in React native using react-native-paper
React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Approach: In this ar
Create an Activity Indicator in react-native using react-native-paper library
React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Prerequisites: Basic
How to add a Progress Bar in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Approach: In this a
How to add a divider in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
How to create a button in react-native using react-native-paper library ?
React-native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
How to create Chip in react-native using react-native-paper ?
React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
How to Use Routing with React Navigation in React Native ?
Almost every mobile application requires navigating between different screens. React Native provides an elegant and easy-to-use library to add navigation to native applications: react-navigation. It is one of the most popular libraries used for routing and navigating in a React Native application. Transitioning between multiple screens is managed b
How to use Flexbox in React Native ?
Flexbox is used to provide consistency to a layout. It is used to make the layout adaptive to the screen size of the device it is running on. Using flexbox design you can specify that a certain element of layout will span to this fraction of the available space. In React Native, Flexbox is the same as it is for basic CSS. The only difference being
Should we use TypeScript with React Native ?
React Native is used to creating apps for Both Android and iOS platforms. It allows you to use a single codebase for both platforms. One of the biggest advantages React Native provides is that it's easy to learn because you don't need to learn a whole new programming language for it. Because it uses well-known javascript under the hood. So develope
What is the use of ScrollView component in React Native ?
In this article, we are going to learn about the uses of the ScrollView Component. So firstly let's know what is ScrollView? The ScrollView Component is an inbuilt react-native component that serves as a generic scrollable container, with the ability to scroll child components and views inside it. It provides the scroll functionality in both direct
