Page flex properties

[juiceo]

Currently the page children (image, title, subtitle) seem to be justified to center on the screen. Is there any way to align them to the top of the page?

[gianpaj]

Same request. I have pages with different length subtitles and the icons and title don't align between pages/screens. This is visible when you swipe between them.

I assume passing an extra Page's style props would be enough to overwrite those

[rsmelo92]

+1

[lowewenzel]

A workaround I tried gave each of the text components (Header, and Subtitle) pre-defined heights and the ImageContainer flex: 1. It keeps the text always in the same spot.

<Onboarding 
imageContainerStyles={{paddingBottom: 0, flex: 1, justifyContent: 'flex-end',}}
pages={[
  {
    backgroundColor: '#fff',
    image: <Image style={{your image styles}} source={require('./logo.png')} />,
    title: <Text style={{...your header text styles, minHeight: '10%'}}>Header</Text>,
    subtitle: <Text style={{...your caption text styles, height: '30%'}}>Caption caption caption</Text>
  }, ...
]}
/>

[jfilter]

The current implementation has a weak spot there. I hope the example of @lowewenzel with custom components helps.

I couldn't figure out a structure that would work in all circumstances. If somebody has better ideas, I am happy to accept PRs. 😎

[marcelkalveram]

Hi there. I've just created PR that addresses this issue. It lets you do the following to give you more control over the positioning of the title/subtitle elements on the screen:

<Onboarding
  containerStyles={{
    justifyContent: "flex-start",
    alignItems: "flex-start"
  }}
/>