jfilter / react-native-onboarding-swiper

🛳 Delightful onboarding for your React-Native app
https://www.npmjs.com/package/react-native-onboarding-swiper
Other
986 stars 180 forks source link

How to change the position of the image and title? I want title above the Image. #99

Open shima93 opened 3 years ago

kkmehta03 commented 3 years ago

Hey @shima93 did you get around on how to achieve this? I want to do something similar. Thanks!

shima93 commented 3 years ago

Hey @KhyatiMehta3, I actually did a trick to get what I wanted. My way is not 100% the right one. But you can try. As you can see for the title and subtitle I put an empty string and made a block of jsx in the image property. hope it helps you. If you found a better way let me know.

 pages={[
          {
            title: "",
            subtitle: "",
            backgroundColor: Colors.Background,
            image: (
              <SafeAreaView>
                <View>
                  <Text style={styles.headerTop}>WELCOME!</Text>
                </View>
                <View style={styles.imageContainer}>
                  <Image
                    style={{
                      height: "190%",
                      width: isIphoneX() ? "115%" : "100%",
                      resizeMode: "contain",
                    }}
                    source={require("../../assets/onboarding-1.png")}
                  />
                  <TouchableOpacity
                    style={styles.buttonBackground}
                    onPress={() => {  }}
                  >
                    <Text style={styles.button}> GET STARTED</Text>
                  </TouchableOpacity>
                </View>
              </SafeAreaView>
            ),
          },
           ]}
jotilohana commented 3 years ago

I just put the same code and add absolute property with some left ,right positions. if there is any better way please let me know.