### Starting Example App Packager (yarn) Source: https://github.com/gorhom/react-native-paper-onboarding/blob/master/CONTRIBUTING.md Use this command to start the Metro server, which is necessary to run the example application during development. ```sh yarn example start ``` -------------------------------- ### Running Example App on Android (yarn) Source: https://github.com/gorhom/react-native-paper-onboarding/blob/master/CONTRIBUTING.md Execute this command to build and run the example application on a connected Android device or emulator. ```sh yarn example android ``` -------------------------------- ### Running Example App on iOS (yarn) Source: https://github.com/gorhom/react-native-paper-onboarding/blob/master/CONTRIBUTING.md Execute this command to build and run the example application on a connected iOS device or simulator. ```sh yarn example ios ``` -------------------------------- ### Setting up Project Dependencies (yarn) Source: https://github.com/gorhom/react-native-paper-onboarding/blob/master/CONTRIBUTING.md Run this command in the root directory to install all required dependencies for each package, including pods for iOS. ```sh yarn bootstrap ``` -------------------------------- ### Installing Paper Onboarding with Yarn or npm Source: https://github.com/gorhom/react-native-paper-onboarding/blob/master/README.md This snippet shows the command-line instructions for adding the @gorhom/paper-onboarding library to a React Native project using either Yarn or npm package managers. Additional dependencies like react-native-reanimated, react-native-gesture-handler, and react-native-svg are also required. ```sh yarn add @gorhom/paper-onboarding # or npm install @gorhom/paper-onboarding ``` -------------------------------- ### Type Checking with TypeScript (yarn) Source: https://github.com/gorhom/react-native-paper-onboarding/blob/master/CONTRIBUTING.md Run this command to perform static type checking on the project files using TypeScript. ```sh yarn typescript ``` -------------------------------- ### Linting Code with ESLint (yarn) Source: https://github.com/gorhom/react-native-paper-onboarding/blob/master/CONTRIBUTING.md Use this command to check the code for potential errors and style issues using ESLint. ```sh yarn lint ``` -------------------------------- ### Fixing Linting Errors (yarn) Source: https://github.com/gorhom/react-native-paper-onboarding/blob/master/CONTRIBUTING.md Run this command to automatically fix common formatting and linting errors identified by ESLint and Prettier. ```sh yarn lint --fix ``` -------------------------------- ### Using Paper Onboarding Component in React Native TSX Source: https://github.com/gorhom/react-native-paper-onboarding/blob/master/README.md This TypeScript React Native snippet demonstrates the basic usage of the PaperOnboarding component. It imports the component and its item type, defines an array of PaperOnboardingItemType objects for the onboarding pages, and renders the PaperOnboarding component passing the data and a close button handler. ```tsx import PaperOnboarding, {PaperOnboardingItemType} from "@gorhom/paper-onboarding"; const data: PaperOnboardingItemType[] = [ { title: 'Hotels', description: 'All hotels and hostels are sorted by hospitality rating', backgroundColor: '#698FB8', image: /* IMAGE COMPONENT */, icon: /* ICON COMPONENT */, content: /* CUSTOM COMPONENT */, }, { title: 'Banks', description: 'We carefully verify all banks before add them into the app', backgroundColor: '#6CB2B8', image: /* IMAGE COMPONENT */, icon: /* ICON COMPONENT */, content: /* CUSTOM COMPONENT */, }, { title: 'Stores', description: 'All local stores are categorized for your convenience', backgroundColor: '#9D8FBF', image: /* IMAGE COMPONENT */, icon: /* ICON COMPONENT */, content: /* CUSTOM COMPONENT */, }, ]; const Screen = () => { const handleOnClosePress = () => console.log('navigate to other screen') return ( ) } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.