Title and subtitle is not working?

[bleedweedsuz]

title and subtitle is working only when image is not added or set it null other wise with image it will display nothing. i will only set padding or some space for title and subtitle.

i try to override titleStyle it's not working?

[jfilter]

Hey, I don't understand what you try to achieve. Do you only want to use images (and not title / subtitle)?

[bleedweedsuz]

I m saying while using image, title and subtitle is not visible. U can see in the image.

And yes i want to use both image and text.

[jfilter]

I'mt not sure if the outer view with flexbox is needed. Did you take a lot at the examples? Generally, the component is working. https://github.com/jfilter/react-native-onboarding-swiper/blob/master/examples/Simple.js

[JanOwiesniak]

Same issue here. This displays only the image (no title, no subtitle)

const OnboardingScreen = (props) => {
  return (
    <Onboarding
      showSkip={false}
      onDone={() => Navigation.setRoot(mainRoot)}
      pages={[
        {
          backgroundColor: '#ffffff',
          image: <Image style={styles.image} source={require('./assets/img/logo.png')} />,
          title: 'Title 1',
          subtitle: 'Subtitle 1',
        },
        {
          backgroundColor: '#bcdcd2',
          image: <Image style={styles.image} source={require('./assets/img/logo.png')} />,
          title: 'Title 2',
          subtitle: 'Subtitle 2',
        },
        {
          backgroundColor: '#f1e8d1',
          image: <Image style={styles.image} source={require('./assets/img/logo.png')} />,
          title: 'Title 3',
          subtitle: 'Subtitle 3',
        },
      ]}
    />
  )
}

const styles = StyleSheet.create({
  image: {
    width: "50%",
    resizeMode: "contain"
  }
});

While this shows title and subtitle

const OnboardingScreen = (props) => {
  return (
    <Onboarding
      showSkip={false}
      onDone={() => Navigation.setRoot(mainRoot)}
      pages={[
        {
          backgroundColor: '#ffffff',
          title: 'Title 1',
          subtitle: 'Subtitle 1',
        },
        {
          backgroundColor: '#bcdcd2',
          title: 'Title 2',
          subtitle: 'Subtitle 2',
        },
        {
          backgroundColor: '#f1e8d1',
          title: 'Title 3',
          subtitle: 'Subtitle 3',
        },
      ]}
    />
  )
}

const styles = StyleSheet.create({
  image: {
    width: "50%",
    resizeMode: "contain"
  }
});

Wrapped component in a View with flex 1 already. Did not solve the issue.

[JanOwiesniak]

Seems to be related to the image pixel size. Not working: 5520×1320 Working: 250x250

[clemmierose]

I have the same issue, resizing the image doesn't help. Anyone managed to resolve the issue?

[iptelephony]

Realise I'm a little late to the party, but hope this helps someone else. I noticed that if I specify the height for Image, the title and subtitles are displayed. If I just specify the width alone, nothing shows. Specifying both width, and height it shows.