Hello to the intelligent developer who is aboded by a good heart to read this with patience.
The above onboarding screen in question uses the following slider:https://github.com/gorhom/react-native-paper-onboarding
After implementing it just for testing purposes, the outcome it returned was not the expected one.It should give the image, description and the other related ones. The problem is that it shows everything but the image. Having tried many different ways, which didn't work, I turned here, looking for a solution.
Here are the not so opulent outputs:
And here's the code:
import { StatusBar } from 'expo-status-bar';import React from 'react';import { StyleSheet, Text, View, Image } from 'react-native';import PaperOnboarding, { PageContentProps, PaperOnboardingItemType } from '@gorhom/paper-onboarding';import './types';import { MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons';import Content from './screens/Content';import { PageProps } from '@gorhom/paper-onboarding/lib/typescript/types';const data: PaperOnboardingItemType[] = [ { title: 'screen 1', description: 'heello this is the first screen', backgroundColor: '#a6aae4', image: ({ }) => <Image source={require('./assets/1.png')} style={{ width: '100%', height: '100%', flex: 1, resizeMode: 'stretch', backgroundColor: 'red', zIndex: 122 }} />, icon: ({ }) => <MaterialIcons name="add-to-home-screen" size={24} color="black" />, content: ((props: PageContentProps) => <Content content="The first one" />), }, { title: 'screen 2', description: 'heello this is the second screen', backgroundColor: '#ccc', image: ({ }) => <Image source={require('./assets/2.png')} />, icon: ({ }) => <MaterialIcons name="home-repair-service" size={24} color="black" />, content: ((props: PageContentProps) => <Content content="This is the second" />), }, { title: 'screen 3', description: 'heello this is the third screen', backgroundColor: '#a6e4d0', image: ({ }) => <Image source={require('./assets/3.png')} />, icon: ({ }) => <MaterialCommunityIcons name="folder-home" size={24} color="black" />, content: ((props: PageContentProps) => <Content content="This is the thrid" />), },];export default function App() { const handleOnClosePress = () => { console.log('navigate to other screen') } return (<PaperOnboarding data={data} onCloseButtonPress={handleOnClosePress} /> )}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', },});What do you think the error is?
Thanks