Building an App Introduction Slider in React Native
July 18, 2020
"dependencies": {
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.7.1",
"@react-navigation/native": "^5.7.0",
"@react-navigation/stack": "^5.7.0",
"axios": "^0.19.2",
"react": "16.13.1",
"react-native": "0.63.1",
"react-native-app-intro-slider": "^4.0.4",
"react-native-gesture-handler": "^1.6.1",
"react-native-loading-spinner-overlay": "^1.1.0",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.1.1",
"react-native-screens": "^2.9.0",
"react-native-vector-icons": "^7.0.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5"
},
import React ,{useEffect,useState}from 'react';
import { View, Text,StyleSheet,Image,Dimensions} from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
import CallApi from '../Componet/Api';
import Icon from 'react-native-vector-icons/MaterialIcons';
const {height} = Dimensions.get('window');
Icon.loadFont();
const Intro=({navigation})=> {
const [SliderData, setSliderData] = useState([]);
useEffect(() => {
CallApiIntro();
}, [])
const CallApiIntro=()=>{
CallApi('get','intro','body',null).then(({data,message,status})=>{
console.info(data)
setSliderData(data.intro_data)
}).catch(err=>{
console.info(err)
})
}
const _renderDoneButton = () => {
return (
<View style={styles.buttonCircle}>
<Icon
name="done"
color="rgba(255, 255, 255, .9)"
size={24}
/>
</View>
);
};
const _keyExtractor = (item) => item.label;
const _renderNextButton = () => {
return (
<View style={styles.buttonCircle}>
<Icon
name="navigate-next"
color="rgba(255, 255, 255, .9)"
size={24}
/>
</View>
);
};
const _RenderPreButton = () => {
return (
<View style={styles.buttonCircle}>
<Icon
name="navigate-before"
color="rgba(255, 255, 255, .9)"
size={24}
/>
</View>
);
};
const _renderItem = ({ item },index) => {
return (
<View key={index} style={styles.slide}>
<Text style={styles.title}>{item.label}</Text>
<Image source={{uri: item.image}} style={styles.image}/>
<Text style={styles.text}>{item.details}</Text>
</View>
);
}
const _onDone=()=>{
}
return (
<View style={{ flex: 1,backgroundColor:'white'}}>
<AppIntroSlider renderItem={_renderItem}
showSkipButton
showPrevButton
keyExtractor={_keyExtractor}
activeDotStyle={{backgroundColor: '#FF5722'}}
renderPrevButton={_RenderPreButton}
renderNextButton={_renderNextButton}
renderDoneButton={_renderDoneButton}
data={SliderData} onDone={_onDone}/>
</View>
);
}
const styles = StyleSheet.create({
buttonCircle: {
width: 40,
height: 40,
backgroundColor:"rgba(255, 87, 34, .9)",
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
},
slide: {
flex: 1,
alignItems: 'center',
justifyContent: 'space-evenly',
},
image: {
width: '100%',
height:height/2.8,
resizeMode:'contain'
},
text: {
color: 'black',
fontSize:18,
textAlign: 'center',
margin: 10,
},
title: {
fontSize: 25,
fontWeight:'bold',
width:'90%',
color: 'black',
textAlign: 'center',
}
});
export default Intro;