Skip and Done buttons Overlapping the Navigator Dots

[ignivaravinderrikhi]

Facing this Styling issue in "react-native-app-intro": "1.1.5"

The Skip and Done buttons are being overlapped by the Navigation Dots.

Any suggestions?

[zfoltin]

Noticed this after upgrading from RN 0.46.1 to 0.47.1... A quick fix is to override the btnContainer's flex value:

btnContainer: {
  flex: 1
}

[ignivaravinderrikhi]

@zfoltin is btnContainer the class name of the Buttons or is this just a sample name ???

[zfoltin]

No, btnContainer is a customStyles property. Something like

<AppIntro
  customStyles={{btnContainer: {flex: 1}}
  pageArray={pageArray}
/>

[dayaki]

For anyone reading this, it should be btnContainer. Note the missing t from container.

[zfoltin]

Sorry, typo there. It's btnContainer

[eusthace811]

In my case is still not perfect yet:

I need it to be aligned left and/or right...

Any help?

[joshuabalduff]

@jlsuarezs try this customStyles={{btnContainer: {alignItems: 'flex-end'}}} will be flex-end for Done btn and flex-start for skip

[sachinharpalani]

@joshmello I tried your solution with flex 1 and it did increase the space between the dots and skip and done but i need the skip and done at the left/right ends respectively. I am using expo using clojurescript. This is my code:

(defn intro-page []
  [AppIntro {:on-skip-btn-click #(dispatch [:set-page :home])
             :on-done-btn-click #(dispatch [:set-page :home])
             :custom-styles {:btn-container {:flex 1}}}
   [view {:style {:flex 1 :justify-content "center" :align-items "center" :background-color "#9DD6EB" :padding 15}}
    [view {:level 10}
     [text {:style {:color "#fff" :font-size 30 :font-weight "bold"}} "Page 1"]]]
   [view {:style {:flex 1 :justify-content "center" :align-items "center" :background-color "#a4b602" :padding 15}}
    [view {:level 10}
     [text {:style {:color "#fff" :font-size 30 :font-weight "bold"}} "Page 2"]]]
   [view {:style {:flex 1 :justify-content "center" :align-items "center" :background-color "#fa931d" :padding 15}}
    [view {:level 10}
     [text {:style {:color "#fff" :font-size 30 :font-weight "bold"}} "Page 3"]]]])

This is the output:

My trouble is how to make the flex end and flex start that you mentioned to the skip and done button as i guess both are accessed through btnContainer only

[sachinharpalani]

Hey i solved the issue by manually changing the props in the component files directly. Thanks :)

[shubham-srivastava-goku]

Just change these styles in AppIntro.js

controllText: {
    color: '#fff',
    fontSize: 22,
    fontWeight: 'bold',
    alignSelf: "flex-start" /* Added */
},

nextButtonText: {
    fontSize: 25,
    fontWeight: 'bold',
    fontFamily: 'Arial',
    alignSelf: "flex-end" /* Added */
},