How to create custom slider react-native || without any npm || pc infotech || The 5-minute React Native Custom Slider

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init CustomSlider 

How to install

yarn add react-native-responsive-fontsize
# or 
npm install react-native-responsive-fontsize --save

Code:

import React, { Component } from 'react';
import { Text, View, ScrollView, Image, Dimensions, StatusBar, KeyboardAvoidingView, 
Animated, ImageBackground, StyleSheet, TouchableOpacity } from 'react-native';
const { width, height } = Dimensions.get('window');
const { PrankImage, flexible_girlImage, dumbbells_girlImage, running_girlImage, 
JumpImage, capposeImage, TraininggirlImage, ChestWorkoutImage, Menu1Image,
 ProfileImage, gymgirlImage, BackImage, LikeImage, ShareImage, StarImage } = Images;
import Images from '../../Helpers/Images'
const { MEDIUM, REGULAR, BOLD } = fonts;
const { Black, Grey, White, pink, lightpink } = colors;
import colors from '../../Helpers/colors'
import fonts from '../../Helpers/fonts'
import { RFPercentage, RFValue } from 'react-native-responsive-fontsize';
export default class sliderComponents extends Component {
    scrollX = new Animated.Value(0)
  constructor(props) {
        super(props);
        this.state = {
         sliderItems: [
                {
                   name: 'Your Superlative \n Personal Trainer',
                   description: 'Contrary to popular belief, Lorem Ipsum is ',
                },
                {
                    name: 'Cute Couple',
                    description: 'It is a',   
                {
                    name: 'Cute Babys',
                    description: 'There are many variations of passages of ',
                },
            ],
        }
    }
    autoSlideItem = () => {
        const numofsliderItems = 3;
        let scrollValue = 0, scrolled = 0;
        setInterval(function () {
            scrolled++;
            console.log(scrolled);
            if (scrolled < numofsliderItems)
                scrollValue = scrollValue + width;
            else {
                scrollValue = 0;
                scrolled = 0
            }
            _scrollView.scrollTo({ x: scrollValue, animated: false })
        }, 3000);
    }
    componentDidMount() {
        this.autoSlideItem();
    }
render() {
        let position = Animated.divide(this.scrollX, width);
        return (
            <KeyboardAvoidingView behavior={'padding'} 
            enabled={Platform.OS === 'ios' ? true : false} style={Styles.container}>
                <StatusBar backgroundColor={'transparent'} 
                    barStyle="light-content" translucent={true} />
                <ScrollView
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    pagingEnabled={true}
                    showsDots={true}
                    onScroll={Animated.event([{ nativeEvent: 
                    { contentOffset: { x: this.scrollX } } }])}
                    scrollEventThrottle={16}
                    ref={(scrollView) => { _scrollView = scrollView; }}>
                    {/* :::::::::::::::::::: SLide - 1 :::::::::::: */}
                    <View style={Styles.masterSliderView}>
                        <Image source={dumbbells_girlImage} 
                            style={Styles.SliderImage} />
                        <Text style={Styles.titleText} >
                        Your Superlative {'\n'} Personal Trainer</Text>
                        <Text style={Styles.descriptionText} numberOfLines={2}>
            Personalized training and plans {'\n'} for any type of fitness goal</Text>
                        <TouchableOpacity
                         onPress={() => this.props.navigation.navigate('Login')}
                            style={{
                                width: RFPercentage(35), height: RFPercentage(7.5),
                                 marginTop: RFValue(30), elevation: 2,
                                backgroundColor: Black, justifyContent: 'center', 
                                alignItems: 'center', borderRadius: RFValue(25)
                            }}>
                            <Text style={{ fontFamily: MEDIUM, fontSize: RFValue(15), 
                            color: White }}>Start training</Text>
                        </TouchableOpacity>
                    </View>
                    {/* ::::::::::::::::::::::::::::::: SLide - 2 ::::::::::::::::::::::::::::::::::::::::: */}
                    <View style={Styles.masterSlider2View}>
                        <View style={{ width: '94%', alignSelf: 'center',
                         marginTop: RFValue(50) }}>
                            <Text style={{
                                fontFamily: MEDIUM,
                                fontSize: RFValue(30),
                            }} >Make{'\n'}Your Self</Text>
                            <Text style={{
                                fontFamily: MEDIUM, fontSize: RFValue(30),
                                color: White, marginTop: -10,
                                textShadowOffset: { width: 3, height: 3 },
                                textShadowRadius: 1,
                                textShadowColor: Black
                            }}>Flexible</Text>
                            <Text style={{ fontFamily: MEDIUM, marginTop: RFValue(10),
                            fontSize: RFValue(15), color: Grey }}>
                            Your flexibility is your strength</Text>
                        </View>
                        <Image source={flexible_girlImage} style={Styles.SliderImage} />
                        <TouchableOpacity
                         onPress={() => this.props.navigation.navigate('Login')}
                            style={{
                                width: RFPercentage(30), height: RFPercentage(7.5),
                              elevation: 2, position: 'absolute', bottom: 0, right: 0,
                                backgroundColor: Black, justifyContent: 'center',
                                alignItems: 'center',
                                borderTopLeftRadius: RFValue(25),
                                 borderBottomLeftRadius: RFValue(25)
                            }}>
                            <Text style={{ fontFamily: MEDIUM, fontSize: RFValue(15),
                             color: White }}>Start training</Text>
                        </TouchableOpacity>
                    </View>
                    {/* ::::::::::::::::: SLide - 3 :::::::::::::::::::: */}
                    <View style={{}}>
                        <Image source={running_girlImage} style={Styles.SliderImage} />
                        <Text style={Styles.titleSlide3} >
                        Fit & Strong {'\n'}Way to Live</Text>
                        <Text style={Styles.subtitleText} numberOfLines={2}>
                    Your Workout instanty {'\n'} based on your inner fitness</Text>
                        <TouchableOpacity
                         onPress={() => this.props.navigation.navigate('Login')}
                            style={{
                                width: RFPercentage(35), height: RFPercentage(7.5), 
                                marginTop: RFValue(30), elevation: 2,
                                backgroundColor: Black, justifyContent: 'center',
                 alignItems: 'center', alignSelf: 'center', borderRadius: RFValue(25)
                            }}>
                            <Text style={{ fontFamily: MEDIUM, fontSize: RFValue(15), 
                            color: White }}>Start training</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
                <View style={{
                    flexDirection: 'row', alignItems: 'center',
                    justifyContent: 'space-between',
                     alignSelf: 'center', width: '90%', height: RFPercentage(10)
                }}>
                    <View
                        style={{ flexDirection: 'row', alignItems: 'center' }}>
                        {this.state.sliderItems.map((_, i, ) => {
                            let opacity = position.interpolate({
                                inputRange: [i - 1, i, i + 1],
                                outputRange: [0.3, 1, 0.3],
                                extrapolate: 'clamp'
                            });
                            return (
                                <Animated.View
                                    key={i}
                                    style={{ opacity, height: RFValue(5), 
                                    width: RFValue(15), backgroundColor: Black, 
                                    margin: RFValue(10), borderRadius: 5 }}
                                />
                            );
                        })}
                    </View>
                    <TouchableOpacity 
                    onPress={() => this.props.navigation.navigate('Login')}
                        Style={{ width: '30%' }}>
                        <Text style={{ fontFamily: MEDIUM,
                         fontSize: RFValue(15) }}>Skip</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        );
    }
}
const Styles = StyleSheet.create({
    container: {
        flex: 1
    },
    masterSliderView: {
        alignItems: 'center',
    },
    masterSlider2View: {
    },
    titleText: {
        fontFamily: MEDIUM,
        fontSize: RFValue(30),
        marginTop: RFValue(15)
    },
    titleSlide3: {
        fontFamily: MEDIUM,
        fontSize: RFValue(30),
        marginTop: RFValue(15),
        marginLeft: RFValue(15)
    },
    subtitleText: {
        fontSize: RFValue(15),
        textAlign: 'left',
        color: Grey,
        marginLeft: RFValue(15),
        fontFamily: REGULAR
    },
    descriptionText: {
        fontSize: RFValue(15),
        textAlign: 'center',
        color: Grey,
        fontFamily: REGULAR
    },
    SliderImage: {
        width: width,
        height: RFPercentage(58),
        flexDirection: 'row',
        alignItems: 'center'
    },
})