React Native offers a set of so-called Core Components, which are the basic building blocks of mobile applications. These components are organized into different categories, such as core components, UI components, list views, Android and iOS specific components.<\/p>\n\n\n\n
It serves as a container for other components. It can be used to group components and create layout structures, example:<\/p>\n\n\n\n
import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\n\nconst App = () => {\n return (\n <View style={styles.container}>\n <View style={styles.box}>\n <Text style={styles.text}>Hello from inside the View!<\/Text>\n <\/View>\n <\/View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n box: {\n width: 150,\n height: 150,\n backgroundColor: 'lightblue',\n justifyContent: 'center',\n alignItems: 'center',\n },\n text: {\n color: 'white',\n },\n});\n\nexport default App;\n<\/code><\/pre>\n\n\n\nText<\/h3>\n\n\n\n
The Text component is used to display text. It can be styled using StyleSheet<\/code>, below is an example:<\/p>\n\n\n\nimport React from 'react';\nimport { Text, View, StyleSheet } from 'react-native';\n\nconst App = () => {\n return (\n <View style={styles.container}>\n <Text style={styles.text}>Hello, this is a Text component!<\/Text>\n <Text style={styles.boldText}>Another Text component with bold styling.<\/Text>\n <\/View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n text: {\n fontSize: 20,\n },\n boldText: {\n fontSize: 20,\n fontWeight: 'bold',\n },\n});\n\nexport default App;\n<\/code><\/pre>\n\n\n\nImage<\/h3>\n\n\n\n
The Image<\/strong> component is used to display images in the application.<\/p>\n\n\n\nimport React from 'react';\nimport { Image, View, StyleSheet } from 'react-native';\n\nconst App = () => {\n return (\n <View style={styles.container}>\n <Image \n source={{ uri: 'https:\/\/reactnative.dev\/img\/tiny_logo.png' }} \n style={styles.image}\n \/>\n <\/View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n image: {\n width: 100,\n height: 100,\n },\n});\n\nexport default App;\n<\/code><\/pre>\n\n\n\nTextInput<\/h3>\n\n\n\n
The TextInput<\/strong> component is used to allow the user to type text. An example of the TextInput component below:<\/p>\n\n\n\nimport React, { useState } from 'react';\nimport { TextInput, View, Text, StyleSheet } from 'react-native';\n\nconst App = () => {\n const [text, setText] = useState('');\n\n return (\n <View style={styles.container}>\n <TextInput\n style={styles.input}\n placeholder=\"Enter some text\"\n value={text}\n onChangeText={(newText) => setText(newText)}\n \/>\n <Text>You typed: {text}<\/Text>\n <\/View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n input: {\n height: 40,\n borderColor: 'gray',\n borderWidth: 1,\n padding: 10,\n width: '80%',\n marginBottom: 20,\n },\n});\n\nexport default App;\n<\/code><\/pre>\n\n\n\nScrollview<\/h3>\n\n\n\n
The ScrollView<\/strong> component allows you to scroll through content, especially if there is more content than the screen can accommodate.<\/p>\n\n\n\nExample:<\/p>\n\n\n\n
import React from 'react';\nimport { ScrollView, View, Text, StyleSheet } from 'react-native';\n\nconst App = () => {\n return (\n <ScrollView style={styles.scrollView}>\n {Array.from({ length: 20 }, (_, i) => (\n <View key={i} style={styles.item}>\n <Text>Item {i + 1}<\/Text>\n <\/View>\n ))}\n <\/ScrollView>\n );\n};\n\nconst styles = StyleSheet.create({\n scrollView: {\n marginVertical: 20,\n },\n item: {\n padding: 20,\n marginVertical: 10,\n backgroundColor: 'lightgray',\n alignItems: 'center',\n },\n});\n\nexport default App;\n<\/code><\/pre>\n\n\n\nStyleSheet<\/h3>\n\n\n\n
The StyleSheet component is used to define styles in React Native, which can then be assigned to components.<\/p>\n\n\n\n
import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\n\nconst App = () => {\n return (\n <View style={styles.container}>\n <Text style={styles.title}>Hello, StyleSheet Example!<\/Text>\n <Text style={styles.subtitle}>This is how you define reusable styles in React Native.<\/Text>\n <\/View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n padding: 16,\n },\n title: {\n fontSize: 24,\n fontWeight: 'bold',\n marginBottom: 10,\n },\n subtitle: {\n fontSize: 16,\n color: 'gray',\n },\n});\n\nexport default App;\n<\/code><\/pre>\n\n\n\nUI components<\/h2>\n\n\n\n
In the following section, we introduce some important UI components that are available in React Native and can be used to build interactive and aesthetically pleasing user interfaces.<\/p>\n\n\n\n
CustomButton<\/h3>\n\n\n\n
A button that the user can press to trigger a specific action (e.g. save data, move to the next screen, etc.). Below is an example of such a component:<\/p>\n\n\n\n
import React from 'react';\nimport { TouchableOpacity, Text, StyleSheet } from 'react-native';\n\n\/\/ CustomButton - Przycisk UI\nconst CustomButton = ({ title, onPress }) => {\nreturn (\n<TouchableOpacity style={styles.button} onPress={onPress}>\n<Text style={styles.buttonText}>{title}<\/Text>\n<\/TouchableOpacity>\n);\n};\n\n\/\/ Stylizacje przycisku\nconst styles = StyleSheet.create({\nbutton: {\nbackgroundColor: '#4CAF50',\npadding: 15,\nborderRadius: 8,\nalignItems: 'center',\nmarginVertical: 10,\n},\nbuttonText: {\ncolor: '#FFFFFF',\nfontSize: 16,\nfontWeight: 'bold',\n},\n});\n\nexport default CustomButton;\n\n\/\/ Przyk\u0142ad u\u017cycia komponentu CustomButton\n\/\/ import CustomButton from '.\/CustomButton';\n\/\/\n\/\/ const App = () => {\n\/\/ return (\n\/\/ <CustomButton\n\/\/ title=\"Kliknij mnie!\"\n\/\/ onPress={() => alert('Przycisk zosta\u0142 klikni\u0119ty!')}\n\/\/ \/>\n\/\/ );\n\/\/ };<\/code><\/pre>\n\n\n\nCard<\/h3>\n\n\n\n
Card is a component that displays information in a clear and visually appealing way. Most often it consists of a title, description and sometimes additional elements, such as an image or buttons. It is used, for example, to present a single product, an article, or a list item.<\/p>\n\n\n\n
import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\n\n\/\/ Card - Karta UI\nconst Card = ({ title, description }) => {\n return (\n <View style={styles.card}>\n <Text style={styles.cardTitle}>{title}<\/Text>\n <Text style={styles.cardDescription}>{description}<\/Text>\n <\/View>\n );\n};\n\n\/\/ Stylizacje komponentu Card\nconst styles = StyleSheet.create({\n card: {\n backgroundColor: '#FFFFFF',\n padding: 15,\n borderRadius: 10,\n shadowColor: '#000',\n shadowOffset: { width: 0, height: 2 },\n shadowOpacity: 0.8,\n shadowRadius: 2,\n elevation: 5,\n marginVertical: 10,\n },\n cardTitle: {\n fontSize: 18,\n fontWeight: 'bold',\n },\n cardDescription: {\n fontSize: 14,\n color: '#777777',\n marginTop: 5,\n },\n});\n\nexport default Card;\n\n\/\/ Przyk\u0142ad u\u017cycia komponentu Card\n\/\/ import Card from '.\/Card';\n\/\/ \n\/\/ const App = () => {\n\/\/ return (\n\/\/ <Card\n\/\/ title=\"Tytu\u0142 Karty\"\n\/\/ description=\"This is a sample description for this card.\"\n\/\/ \/>\n\/\/ );\n\/\/ };\n<\/code><\/pre>\n\n\n\nModal<\/h3>\n\n\n\n
The Modal component is used to display content that catches the user’s attention, such as messages or forms. A modal typically displays additional information against the background of the current view and requires user interaction to continue.<\/p>\n\n\n\n
import React, { useState } from 'react';\nimport { View, Text, Modal, TouchableOpacity, StyleSheet } from 'react-native';\n\n\/\/ CustomModal - Komponent Modal\nconst CustomModal = ({ visible, onClose, title, content }) => {\n return (\n <Modal\n transparent={true}\n animationType=\"slide\"\n visible={visible}\n onRequestClose={onClose}\n >\n <View style={styles.modalOverlay}>\n <View style={styles.modalContent}>\n <Text style={styles.modalTitle}>{title}<\/Text>\n <Text style={styles.modalText}>{content}<\/Text>\n <TouchableOpacity style={styles.closeButton} onPress={onClose}>\n <Text style={styles.closeButtonText}>Zamknij<\/Text>\n <\/TouchableOpacity>\n <\/View>\n <\/View>\n <\/Modal>\n );\n};\n\n\/\/ Stylizacje komponentu Modal\nconst styles = StyleSheet.create({\n modalOverlay: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n },\n modalContent: {\n width: 300,\n backgroundColor: '#FFF',\n padding: 20,\n borderRadius: 10,\n alignItems: 'center',\n },\n modalTitle: {\n fontSize: 20,\n fontWeight: 'bold',\n marginBottom: 10,\n },\n modalText: {\n fontSize: 16,\n color: '#777',\n textAlign: 'center',\n marginBottom: 20,\n },\n closeButton: {\n backgroundColor: '#4CAF50',\n paddingVertical: 10,\n paddingHorizontal: 20,\n borderRadius: 5,\n },\n closeButtonText: {\n color: '#FFF',\n fontSize: 16,\n },\n});\n\n\/\/ Przyk\u0142ad u\u017cycia komponentu CustomModal\nconst App = () => {\n const [isModalVisible, setIsModalVisible] = useState(false);\n\n const toggleModal = () => {\n setIsModalVisible(!isModalVisible);\n };\n\n return (\n <View style={styles.appContainer}>\n <TouchableOpacity style={styles.openButton} onPress={toggleModal}>\n <Text style={styles.openButtonText}>Otw\u00f3rz Modal<\/Text>\n <\/TouchableOpacity>\n\n <CustomModal\n visible={isModalVisible}\n onClose={toggleModal}\n title=\"Przyk\u0142adowy Modal\"\n content=\"To jest przyk\u0142adowa tre\u015b\u0107 modala. Mo\u017cesz zamkn\u0105\u0107 modal, naciskaj\u0105c przycisk poni\u017cej.\"\n \/>\n <\/View>\n );\n};\n\n\/\/ Stylizacje dla przyk\u0142adu u\u017cycia\nconst stylesApp = StyleSheet.create({\n appContainer: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#F5FCFF',\n },\n openButton: {\n backgroundColor: '#4CAF50',\n padding: 15,\n borderRadius: 8,\n },\n openButtonText: {\n color: '#FFFFFF',\n fontSize: 16,\n fontWeight: 'bold',\n },\n});\n\nexport default App;\n<\/code><\/pre>\n\n\n\nSwitch<\/h3>\n\n\n\n
Switch<\/strong> is a native React Native component that is used to render a Boolean<\/code> switch, representing a value of type boolean<\/code> (true<\/code> or false<\/code>). It is usually used to toggle some option on or off.<\/p>\n\n\n\nBelow you will find sample code for the Switch<\/strong> component :<\/p>\n\n\n\nimport React, { useState } from 'react';\nimport { View, Text, Switch, StyleSheet } from 'react-native';\n\n\/\/ Komponent CustomSwitch\nconst CustomSwitch = ({ label, value, onValueChange }) => {\n return (\n <View style={styles.switchContainer}>\n <Text style={styles.switchLabel}>{label}<\/Text>\n <Switch\n value={value} \/\/ Kontrolowane przez stan rodzica\n onValueChange={onValueChange} \/\/ Callback, kt\u00f3ry zmienia stan\n thumbColor={value ? '#4CAF50' : '#f4f3f4'}\n trackColor={{ false: '#767577', true: '#81b0ff' }}\n \/>\n <\/View>\n );\n};\n\n\/\/ Przyk\u0142ad u\u017cycia komponentu CustomSwitch\nconst App = () => {\n \/\/ Zarz\u0105dzanie stanem prze\u0142\u0105cznika - kontrolowanie warto\u015bci `value` Switcha\n const [isEnabled, setIsEnabled] = useState(false);\n\n \/\/ Funkcja callback do zmiany stanu\n const toggleSwitch = () => setIsEnabled(previousState => !previousState);\n\n return (\n <View style={stylesApp.container}>\n <CustomSwitch\n label=\"W\u0142\u0105cz Tryb Ciemny\"\n value={isEnabled} \/\/ Warto\u015b\u0107 prze\u0142\u0105cznika, przekazywana jako prop\n onValueChange={toggleSwitch} \/\/ Callback, kt\u00f3ry zmienia stan, aby `Switch` zaktualizowa\u0142 warto\u015b\u0107\n \/>\n <\/View>\n );\n};\n\n\/\/ Stylizacje komponent\u00f3w\nconst styles = StyleSheet.create({\n switchContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginVertical: 10,\n paddingHorizontal: 20,\n },\n switchLabel: {\n fontSize: 16,\n color: '#333',\n },\n});\n\nconst stylesApp = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#F5FCFF',\n },\n});\n\nexport default App;\n<\/code><\/pre>\n\n\n\nComponents for Android in React Native<\/h2>\n\n\n\n
React Native offers various Android-specific tools that allow for a more native user experience and integration with operating system features. Below are components and APIs that are Android-specific, meaning they help you build applications dedicated to this platform.<\/p>\n\n\n\n
BackHandler<\/h3>\n\n\n\n
The BackHandler component is used to detect “back” button presses on an Android device. It is used to control what happens when the user tries to exit the app or return to the previous screen.<\/p>\n\n\n\n
BackHandler component code example:<\/p>\n\n\n\n
import React, { useEffect } from 'react';\nimport { View, Text, StyleSheet, BackHandler, Alert } from 'react-native';\n\n\/\/ BackHandler Example\nconst BackHandlerExample = () => {\n useEffect(() => {\n \/\/ Funkcja obs\u0142uguj\u0105ca naci\u015bni\u0119cie przycisku \"wstecz\"\n const backAction = () => {\n Alert.alert(\"Uwaga!\", \"Czy na pewno chcesz wyj\u015b\u0107?\", [\n {\n text: \"Nie\",\n onPress: () => null,\n style: \"cancel\",\n },\n { text: \"Tak\", onPress: () => BackHandler.exitApp() },\n ]);\n return true; \/\/ Zatrzymuje domy\u015blne dzia\u0142anie przycisku \"wstecz\"\n };\n\n \/\/ Dodanie listenera do naci\u015bni\u0119cia przycisku \"wstecz\"\n const backHandler = BackHandler.addEventListener(\n \"hardwareBackPress\",\n backAction\n );\n\n \/\/ Czyszczenie listenera przy odmontowaniu komponentu\n return () => backHandler.remove();\n }, []);\n\n return (\n <View style={styles.container}>\n <Text style={styles.infoText}>\n Naci\u015bnij przycisk \"wstecz\", aby wy\u015bwietli\u0107 komunikat.\n <\/Text>\n <\/View>\n );\n};\n\n\/\/ Stylizacje komponentu BackHandlerExample\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#F5FCFF',\n },\n infoText: {\n fontSize: 16,\n textAlign: 'center',\n marginHorizontal: 20,\n },\n});\n\nexport default BackHandlerExample;\n<\/code><\/pre>\n\n\n\nDrawerLayoutAndroid<\/h3>\n\n\n\n
A component that allows you to render a side drawer view (Drawer Layout) on Android. Drawer is a slide-out menu that usually contains navigation options. It is often used to implement an app’s navigation menu. DrawerLayoutAndroid is specific to Android, but similar effects can be achieved using multiplatform libraries like React Navigation.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
import React, { useRef } from 'react';\nimport { View, Text, StyleSheet, DrawerLayoutAndroid, TouchableOpacity } from 'react-native';\n\nconst DrawerLayoutExample = () => {\n \/\/ U\u017cycie hooka useRef, aby uzyska\u0107 referencj\u0119 do DrawerLayoutAndroid\n const drawer = useRef(null);\n\n \/\/ Widok zawarto\u015bci szuflady\n const renderDrawerContent = () => (\n <View style={styles.drawerContainer}>\n <Text style={styles.drawerHeader}>Menu Nawigacyjne<\/Text>\n <TouchableOpacity style={styles.drawerItem} onPress={() => drawer.current.closeDrawer()}>\n <Text style={styles.drawerItemText}>Strona G\u0142\u00f3wna<\/Text>\n <\/TouchableOpacity>\n <TouchableOpacity style={styles.drawerItem} onPress={() => drawer.current.closeDrawer()}>\n <Text style={styles.drawerItemText}>Profil<\/Text>\n <\/TouchableOpacity>\n <TouchableOpacity style={styles.drawerItem} onPress={() => drawer.current.closeDrawer()}>\n <Text style={styles.drawerItemText}>Ustawienia<\/Text>\n <\/TouchableOpacity>\n <\/View>\n );\n\n return (\n <DrawerLayoutAndroid\n ref={drawer}\n drawerWidth={250}\n drawerPosition=\"left\"\n renderNavigationView={renderDrawerContent}\n >\n <View style={styles.container}>\n <TouchableOpacity onPress={() => drawer.current.openDrawer()} style={styles.openDrawerButton}>\n <Text style={styles.openDrawerText}>Otw\u00f3rz Menu<\/Text>\n <\/TouchableOpacity>\n <Text style={styles.mainText}>To jest g\u0142\u00f3wny widok aplikacji.<\/Text>\n <\/View>\n <\/DrawerLayoutAndroid>\n );\n};\n\n\/\/ Stylizacje komponent\u00f3w\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#F5FCFF',\n },\n openDrawerButton: {\n backgroundColor: '#4CAF50',\n padding: 15,\n borderRadius: 8,\n marginBottom: 20,\n },\n openDrawerText: {\n color: '#FFFFFF',\n fontSize: 16,\n fontWeight: 'bold',\n },\n mainText: {\n fontSize: 18,\n textAlign: 'center',\n color: '#333',\n },\n drawerContainer: {\n flex: 1,\n backgroundColor: '#FFF',\n padding: 16,\n },\n drawerHeader: {\n fontSize: 20,\n fontWeight: 'bold',\n marginBottom: 20,\n },\n drawerItem: {\n marginVertical: 10,\n },\n drawerItemText: {\n fontSize: 16,\n color: '#000',\n },\n});\n\nexport default DrawerLayoutExample;\n<\/code><\/pre>\n\n\n\nPermissionsAndroid<\/strong><\/h3>\n\n\n\nThe PermissionsAndroid component allows you to check and ask users for access to device resources, such as the camera, location or memory. This is crucial to ensure that the application has the right permissions to run on Android.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
import React, { useState } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, PermissionsAndroid, Alert } from 'react-native';\n\nconst PermissionsExample = () => {\n const [locationPermission, setLocationPermission] = useState(false);\n\n \/\/ Funkcja do proszenia u\u017cytkownika o uprawnienia lokalizacji\n const requestLocationPermission = async () => {\n try {\n const granted = await PermissionsAndroid.request(\n PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,\n {\n title: 'Uprawnienia Lokalizacji',\n message:\n 'Aplikacja potrzebuje dost\u0119pu do Twojej lokalizacji, aby \u015bwiadczy\u0107 lepsze us\u0142ugi.',\n buttonNeutral: 'Zapytaj p\u00f3\u017aniej',\n buttonNegative: 'Anuluj',\n buttonPositive: 'OK',\n },\n );\n if (granted === PermissionsAndroid.RESULTS.GRANTED) {\n setLocationPermission(true);\n Alert.alert(\"Uprawnienia przyznane\", \"Masz teraz dost\u0119p do lokalizacji.\");\n } else {\n setLocationPermission(false);\n Alert.alert(\"Uprawnienia odrzucone\", \"Nie przyznano dost\u0119pu do lokalizacji.\");\n }\n } catch (err) {\n console.warn(err);\n }\n };\n\n return (\n <View style={styles.container}>\n <Text style={styles.infoText}>\n {locationPermission\n ? \"Uprawnienia lokalizacji s\u0105 przyznane.\"\n : \"Uprawnienia lokalizacji nie s\u0105 przyznane.\"}\n <\/Text>\n <TouchableOpacity style={styles.permissionButton} onPress={requestLocationPermission}>\n <Text style={styles.buttonText}>Popro\u015b o dost\u0119p do lokalizacji<\/Text>\n <\/TouchableOpacity>\n <\/View>\n );\n};\n\n\/\/ Stylizacje komponentu PermissionsExample\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#F5FCFF',\n padding: 20,\n },\n infoText: {\n fontSize: 18,\n textAlign: 'center',\n marginBottom: 20,\n },\n permissionButton: {\n backgroundColor: '#4CAF50',\n padding: 15,\n borderRadius: 8,\n },\n buttonText: {\n color: '#FFFFFF',\n fontSize: 16,\n fontWeight: 'bold',\n },\n});\n\nexport default PermissionsExample;\n<\/code><\/pre>\n\n\n\nToastAndroid<\/h3>\n\n\n\n
The ToastAndroid component allows you to create native Toast notifications in Android. A toast is a small, non-intrusive notification that appears for a short time at the bottom of the screen and automatically disappears.<\/p>\n\n\n\n
import React from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, ToastAndroid } from 'react-native';\n\nconst ToastExample = () => {\n\/\/ Funkcja do wy\u015bwietlania Toast\nconst showToast = () => {\nToastAndroid.show(\"To jest wiadomo\u015b\u0107 Toast\", ToastAndroid.SHORT);\n};\n\nconst showToastWithGravity = () => {\nToastAndroid.showWithGravity(\n\"To jest Toast z grawitacj\u0105!\",\nToastAndroid.LONG,\nToastAndroid.CENTER\n);\n};\n\nconst showToastWithGravityAndOffset = () => {\nToastAndroid.showWithGravityAndOffset(\n\"Toast z grawitacj\u0105 i przesuni\u0119ciem!\",\nToastAndroid.LONG,\nToastAndroid.BOTTOM,\n0, \/\/ Przesuni\u0119cie w poziomie\n50 \/\/ Przesuni\u0119cie w pionie\n);\n};\n\nreturn (\n<View style={styles.container}>\n<Text style={styles.header}>Przyk\u0142ady ToastAndroid<\/Text>\n\n<TouchableOpacity style={styles.button} onPress={showToast}>\n<Text style={styles.buttonText}>Poka\u017c Toast (kr\u00f3tki)<\/Text>\n<\/TouchableOpacity>\n\n<TouchableOpacity style={styles.button} onPress={showToastWithGravity}>\n<Text style={styles.buttonText}>Poka\u017c Toast z grawitacj\u0105<\/Text>\n<\/TouchableOpacity>\n\n<TouchableOpacity style={styles.button} onPress={showToastWithGravityAndOffset}>\n<Text style={styles.buttonText}>Poka\u017c Toast z przesuni\u0119ciem<\/Text>\n<\/TouchableOpacity>\n<\/View>\n);\n};\n\n\/\/ Stylizacje komponentu ToastExample\nconst styles = StyleSheet.create({\ncontainer: {\nflex: 1,\njustifyContent: 'center',\nalignItems: 'center',\nbackgroundColor: '#F5FCFF',\n},\nheader: {\nfontSize: 20,\nfontWeight: 'bold',\nmarginBottom: 20,\n},\nbutton: {\nbackgroundColor: '#4CAF50',\npadding: 15,\nborderRadius: 8,\nmarginVertical: 10,\n},\nbuttonText: {\ncolor: '#FFFFFF',\nfontSize: 16,\nfontWeight: 'bold',\n},\n});\n\nexport default ToastExample;\n<\/code><\/pre>\n\n\n\niOS-specific components in React Native<\/h2>\n\n\n\n
The iOS-specific components in React Native are used to provide more native integration with the iOS user interface. With the development of React Native, some iOS-dedicated components have been rendered obsolete and have been replaced by cross-platform components such as: ActionSheetIOS.<\/p>\n\n\n\n
ActionSheetIOS.<\/h3>\n\n\n\n
ActionSheetIOS is an API component used to display actions for the user to choose from. It works in the form of a fly-out sheet from the bottom of the screen, containing a list of options that the user can choose from, such as “Cancel” or “Delete.” It can be used to offer the user a choice from several options. A typical use case is asking the user what they want to do with an item.<\/p>\n\n\n\n
Below is an example of the ActionSheetIOS component:<\/p>\n\n\n\n
import React from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, ActionSheetIOS } from 'react-native';\n\nconst ActionSheetExample = () => {\n\/\/ ActionSheet opening function\nconst showActionSheet = () => {\nActionSheetIOS.showActionSheetWithOptions(\n{\noptions: [\"Cancel\", \"Option 1\", \"Option 2\", \"Delete\"],\ndestructiveButtonIndex: 3, \/\/ Destructive button index\ncancelButtonIndex: 0, \/\/ Cancel button index\ntitle: \"Select an option\",\nmessage: \"Select one of the available options below:\",\n},\n(buttonIndex) => {\n\/\/ Handle the user's button selection\nif (buttonIndex === 0) {\nconsole.log(\"User cancelled the action\");\n} else if (buttonIndex === 1) {\nconsole.log(\"Selected Option 1\");\n} else if (buttonIndex === 2) {\nconsole.log(\"Selected Option 2\");\n} else if (buttonIndex === 3) {\nconsole.log(\"Delete selected\");\n}\n}\n);\n};\n\nreturn (\n<View style={styles.container}>\n<Text style={styles.header}>Example of using ActionSheetIOS<\/Text>\n<TouchableOpacity style={styles.button} onPress={showActionSheet}>\n<Text style={styles.buttonText}>Show ActionSheet<\/Text>\n<\/TouchableOpacity>\n<\/View>\n);\n};\n\n\/\/ ActionSheetExample component styles\nconst styles = StyleSheet.create({\ncontainer: {\nflex: 1,\njustifyContent: 'center',\nalignItems: 'center',\nbackgroundColor: '#F5FCFF',\npadding: 20,\n},\nheader: {\nfontSize: 20,\nfontWeight: 'bold',\nmarginBottom: 20,\n},\nbutton: {\nbackgroundColor: '#4CAF50',\npadding: 15,\nborderRadius: 8,\n},\nbuttonText: {\ncolor: '#FFFFFF',\nfontSize: 16,\nfontWeight: 'bold',\n},\n});\n\nexport default ActionSheetExample;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Components in React are the basic building blocks from which you build applications. Each component has its own logic and appearance, so you can easily create, modify and use them repeatedly in different places in the application. They can be simple (e.g. displaying text) or complex (e.g. containing many other components). Components make the code more organized and easier to understand and develop. In the following article, we introduce the basic components and APIs available in React Native, which enable developers to quickly and efficiently create user interfaces in mobile applications.<\/p>\n","protected":false},"author":2,"featured_media":4940,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-1656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile"],"acf":[],"yoast_head":"\n
A Guide to components in React Native | UniqueDevs<\/title>\n<meta name=\"description\" content=\"Dive into the world of React Native components with us. Examples, definitions, characteristics of core components and APIs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Guide to components in React Native | UniqueDevs\" \/>\n<meta property=\"og:description\" content=\"Dive into the world of React Native components with us. Examples, definitions, characteristics of core components and APIs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/people\/Unique-Devs\/61564365418277\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-15T14:31:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-18T13:19:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/11\/programming-3647303_1280.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Hubert Olech\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hubert Olech\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/\"},\"author\":{\"name\":\"Hubert Olech\",\"@id\":\"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18\"},\"headline\":\"Components of React Native\",\"datePublished\":\"2024-11-15T14:31:11+00:00\",\"dateModified\":\"2024-11-18T13:19:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/\"},\"wordCount\":697,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/uniquedevs.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/11\/programming-3647303_1280.webp\",\"articleSection\":[\"Mobile\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/\",\"url\":\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/\",\"name\":\"A Guide to components in React Native | UniqueDevs\",\"isPartOf\":{\"@id\":\"https:\/\/uniquedevs.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/11\/programming-3647303_1280.webp\",\"datePublished\":\"2024-11-15T14:31:11+00:00\",\"dateModified\":\"2024-11-18T13:19:14+00:00\",\"description\":\"Dive into the world of React Native components with us. Examples, definitions, characteristics of core components and APIs.\",\"breadcrumb\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#primaryimage\",\"url\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/11\/programming-3647303_1280.webp\",\"contentUrl\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/11\/programming-3647303_1280.webp\",\"width\":1280,\"height\":1280},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/uniquedevs.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile\",\"item\":\"https:\/\/uniquedevs.com\/blog\/category\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Components of React Native\"}]},{\"@type\":\"Website\",\"@id\":\"https:\/\/uniquedevs.com\/#website\",\"url\":\"https:\/\/uniquedevs.com\/\",\"name\":\"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/uniquedevs.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/uniquedevs.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},[],{\"@type\":\"Person\",\"@id\":\"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18\",\"name\":\"Hubert Olech\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uniquedevs.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1787122061\",\"contentUrl\":\"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1787122061\",\"caption\":\"Hubert Olech\"},\"description\":\"Huber Olech - Founder @UniqueDevs. \u0141\u0105cz\u0119 \u015bwiat technologii z biznesem, pomagaj\u0105c firmom rozwija\u0107 si\u0119 dzi\u0119ki innowacyjnym rozwi\u0105zaniom cyfrowym. Pasja do software development zainspirowa\u0142a mnie do zbudowania zespo\u0142u ekspert\u00f3w, z kt\u00f3rymi wsp\u00f3lnie dostarczamy najwy\u017cszej jako\u015bci produkty dla swoich Klient\u00f3w. W oparciu o swoje wieloletnie do\u015bwiadczenie w bran\u017cy IT, rozumiem trendy w nowych technologiach i potrafi\u0119 przeku\u0107 je w wymierne korzy\u015bci dla firm. Moj\u0105 misj\u0105 jest tworzenie rozwi\u0105za\u0144, kt\u00f3re nie tylko usprawniaj\u0105 procesy, ale tak\u017ce otwieraj\u0105 przed Klientami nowe mo\u017cliwo\u015bci rynkowe i zwi\u0119kszaj\u0105 ich konkurencyjno\u015b\u0107.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/hubert-olech-b0a524167\/\"],\"url\":\"https:\/\/uniquedevs.com\/en\/blog\/author\/h-olech\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A Guide to components in React Native | UniqueDevs","description":"Dive into the world of React Native components with us. Examples, definitions, characteristics of core components and APIs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"A Guide to components in React Native | UniqueDevs","og_description":"Dive into the world of React Native components with us. Examples, definitions, characteristics of core components and APIs.","og_url":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/","og_site_name":"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs","article_publisher":"https:\/\/www.facebook.com\/people\/Unique-Devs\/61564365418277\/","article_published_time":"2024-11-15T14:31:11+00:00","article_modified_time":"2024-11-18T13:19:14+00:00","og_image":[{"width":1280,"height":1280,"url":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/11\/programming-3647303_1280.webp","type":"image\/webp"}],"author":"Hubert Olech","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hubert Olech","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#article","isPartOf":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/"},"author":{"name":"Hubert Olech","@id":"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18"},"headline":"Components of React Native","datePublished":"2024-11-15T14:31:11+00:00","dateModified":"2024-11-18T13:19:14+00:00","mainEntityOfPage":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/"},"wordCount":697,"commentCount":0,"publisher":{"@id":"https:\/\/uniquedevs.com\/#organization"},"image":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/11\/programming-3647303_1280.webp","articleSection":["Mobile"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/","url":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/","name":"A Guide to components in React Native | UniqueDevs","isPartOf":{"@id":"https:\/\/uniquedevs.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#primaryimage"},"image":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/11\/programming-3647303_1280.webp","datePublished":"2024-11-15T14:31:11+00:00","dateModified":"2024-11-18T13:19:14+00:00","description":"Dive into the world of React Native components with us. Examples, definitions, characteristics of core components and APIs.","breadcrumb":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#primaryimage","url":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/11\/programming-3647303_1280.webp","contentUrl":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/11\/programming-3647303_1280.webp","width":1280,"height":1280},{"@type":"BreadcrumbList","@id":"https:\/\/uniquedevs.com\/en\/blog\/components-of-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/uniquedevs.com\/en\/"},{"@type":"ListItem","position":2,"name":"Mobile","item":"https:\/\/uniquedevs.com\/blog\/category\/mobile\/"},{"@type":"ListItem","position":3,"name":"Components of React Native"}]},{"@type":"Website","@id":"https:\/\/uniquedevs.com\/#website","url":"https:\/\/uniquedevs.com\/","name":"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs","description":"","publisher":{"@id":"https:\/\/uniquedevs.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/uniquedevs.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},[],{"@type":"Person","@id":"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18","name":"Hubert Olech","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uniquedevs.com\/#\/schema\/person\/image\/","url":"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1787122061","contentUrl":"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1787122061","caption":"Hubert Olech"},"description":"Huber Olech - Founder @UniqueDevs. \u0141\u0105cz\u0119 \u015bwiat technologii z biznesem, pomagaj\u0105c firmom rozwija\u0107 si\u0119 dzi\u0119ki innowacyjnym rozwi\u0105zaniom cyfrowym. Pasja do software development zainspirowa\u0142a mnie do zbudowania zespo\u0142u ekspert\u00f3w, z kt\u00f3rymi wsp\u00f3lnie dostarczamy najwy\u017cszej jako\u015bci produkty dla swoich Klient\u00f3w. W oparciu o swoje wieloletnie do\u015bwiadczenie w bran\u017cy IT, rozumiem trendy w nowych technologiach i potrafi\u0119 przeku\u0107 je w wymierne korzy\u015bci dla firm. Moj\u0105 misj\u0105 jest tworzenie rozwi\u0105za\u0144, kt\u00f3re nie tylko usprawniaj\u0105 procesy, ale tak\u017ce otwieraj\u0105 przed Klientami nowe mo\u017cliwo\u015bci rynkowe i zwi\u0119kszaj\u0105 ich konkurencyjno\u015b\u0107.","sameAs":["https:\/\/www.linkedin.com\/in\/hubert-olech-b0a524167\/"],"url":"https:\/\/uniquedevs.com\/en\/blog\/author\/h-olech\/"}]}},"_links":{"self":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts\/1656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/comments?post=1656"}],"version-history":[{"count":2,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts\/1656\/revisions"}],"predecessor-version":[{"id":1660,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts\/1656\/revisions\/1660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/media\/4940"}],"wp:attachment":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/media?parent=1656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/categories?post=1656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/tags?post=1656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}