## Custom App Onboarding
### `Light`
### `Dark`
```js
import { View, Text, FlatList, Dimensions, TouchableOpacity, Animated, Image, useColorScheme } from 'react-native';
import React, { useRef, useState } from 'react';
import { useNavigation } from '@react-navigation/native';
const { height, width } = Dimensions.get('window');
const onBoarding = () => {
const navigation = useNavigation();
const [currentIndex, setCurrentIndex] = useState(0);
const ref = useRef();
const data = [
{ id: 1, url: require("./images/1.png"), bgColor: "#ff9a9e",title:'Follow Creators',data:'my name is suraj mourrya what about you' },
{ id: 2, url: require("./images/2.png"), bgColor: "#fad0c4",title:'TBSM Dollar',data:'get set go this green light gang red is to stop' },
{ id: 3, url: require("./images/3.jpg"), bgColor: "#ffdde1",title:'Connect with RED' ,data:'my name is suraj mourrya what about you' },
];
const colorScheme = useColorScheme();
const isDarkMode = colorScheme === 'dark';
const textColor = isDarkMode ? '#fff' : '#000';
const borderColor = isDarkMode ? '#333' : '#eee';
const subTextColor = isDarkMode ? '#bbb' : '#555';
const totalSlides = data.length;
const backgroundColor = useRef(new Animated.Value(0)).current;
const interpolateBackground = backgroundColor.interpolate({
inputRange: data.map((_, index) => index),
outputRange: data.map(item => item.bgColor),
});
const handleNext = () => {
if (currentIndex < totalSlides - 1) {
const newIndex = currentIndex + 1;
setCurrentIndex(newIndex);
ref.current.scrollToIndex({ animated: true, index: newIndex });
Animated.timing(backgroundColor, {
toValue: newIndex,
duration: 500,
useNativeDriver: false,
}).start();
} else {
console.log("Finish Pressed")
}
};
const handleSkip = () => {
console.log("Skip pressed")
};
return (
);
};
const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
slideContainer: {
marginTop: "25%",
flex: 1,
justifyContent: "center",
alignItems: 'center',
},
slide: {
width: width,
height: 350,
padding: 15,
justifyContent: 'center',
alignItems: 'center',
},
image: {
width: '100%',
height: '100%',
borderRadius: 10,
},
dotsContainer: {
flexDirection: 'row',
width: width,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 10,
},
dot: {
borderRadius: 4,
marginLeft: 5,
},
buttonContainer: {
position: "absolute",
bottom: 50,
right: 20,
},
skipContainer: {
position: "absolute",
bottom: 50,
left: 20,
},
button: {
width: 80,
height: 40,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
fontSize: 16,
fontWeight: "bold",
},
};
export default onBoarding;
```
### `Dark`
```js
import { View, Text, FlatList, Dimensions, TouchableOpacity, Animated, Image, useColorScheme } from 'react-native';
import React, { useRef, useState } from 'react';
import { useNavigation } from '@react-navigation/native';
const { height, width } = Dimensions.get('window');
const onBoarding = () => {
const navigation = useNavigation();
const [currentIndex, setCurrentIndex] = useState(0);
const ref = useRef();
const data = [
{ id: 1, url: require("./images/1.png"), bgColor: "#ff9a9e",title:'Follow Creators',data:'my name is suraj mourrya what about you' },
{ id: 2, url: require("./images/2.png"), bgColor: "#fad0c4",title:'TBSM Dollar',data:'get set go this green light gang red is to stop' },
{ id: 3, url: require("./images/3.jpg"), bgColor: "#ffdde1",title:'Connect with RED' ,data:'my name is suraj mourrya what about you' },
];
const colorScheme = useColorScheme();
const isDarkMode = colorScheme === 'dark';
const textColor = isDarkMode ? '#fff' : '#000';
const borderColor = isDarkMode ? '#333' : '#eee';
const subTextColor = isDarkMode ? '#bbb' : '#555';
const totalSlides = data.length;
const backgroundColor = useRef(new Animated.Value(0)).current;
const interpolateBackground = backgroundColor.interpolate({
inputRange: data.map((_, index) => index),
outputRange: data.map(item => item.bgColor),
});
const handleNext = () => {
if (currentIndex < totalSlides - 1) {
const newIndex = currentIndex + 1;
setCurrentIndex(newIndex);
ref.current.scrollToIndex({ animated: true, index: newIndex });
Animated.timing(backgroundColor, {
toValue: newIndex,
duration: 500,
useNativeDriver: false,
}).start();
} else {
console.log("Finish Pressed")
}
};
const handleSkip = () => {
console.log("Skip pressed")
};
return (
);
};
const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
slideContainer: {
marginTop: "25%",
flex: 1,
justifyContent: "center",
alignItems: 'center',
},
slide: {
width: width,
height: 350,
padding: 15,
justifyContent: 'center',
alignItems: 'center',
},
image: {
width: '100%',
height: '100%',
borderRadius: 10,
},
dotsContainer: {
flexDirection: 'row',
width: width,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 10,
},
dot: {
borderRadius: 4,
marginLeft: 5,
},
buttonContainer: {
position: "absolute",
bottom: 50,
right: 20,
},
skipContainer: {
position: "absolute",
bottom: 50,
left: 20,
},
button: {
width: 80,
height: 40,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
fontSize: 16,
fontWeight: "bold",
},
};
export default onBoarding;
```