React-Native Custom Toggle Switch Design same for Android and iOS.

CustomToggleSwitch.js

import * as React from 'react';
import { Animated, Easing, StyleSheet, TouchableOpacity, View, } from 'react-native';

interface Props {
    onColor: string;
    offColor: string;
    onToggle: () => void;
    style: object;
    isOn: boolean;
}

interface DefaultProps {
    onColor: string;
    offColor: string;
    onToggle: () => void;
    style: object;
    isOn: boolean;
}

export default class Toggle extends React.PureComponent<Props> {
    animatedValue = new Animated.Value(0);

    static defaultProps: DefaultProps = {
        onColor: '#134344',
        offColor: '#ecf0f1',
        onToggle: () => { },
        style: {},
        isOn: false,
    };

    render() {
        const moveToggle = this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 20],
        });

        const {
            isOn,
            onColor,
            offColor,
            style,
            onToggle,
        } = this.props;

        const color = isOn ? onColor : offColor;

        this.animatedValue.setValue(isOn ? 0 : 1);

        Animated.timing(this.animatedValue, {
            toValue: isOn ? 1 : 0,
            duration: 150,
            easing: Easing.linear,
        }).start();

        return (
            <View style={styles.container}>

                <TouchableOpacity
                    onPress={() => {
                        typeof onToggle === 'function' && onToggle();
                    }}>
                    <View
                        style={[styles.toggleContainer, style, { backgroundColor: color }]}>
                        <Animated.View
                            style={[
                                styles.toggleWheelStyle,
                                {
                                    marginLeft: moveToggle,
                                },
                            ]}
                        />
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}
                                   
//Styles for the custom component
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    toggleContainer: {
        width: 35,
        height: 18,
        borderRadius: 15,
        justifyContent: 'center',
    },
    toggleWheelStyle: {
        width: 25,
        height: 25,
        backgroundColor: '#1bc0c6',
        borderRadius: 12.5,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.2,
        shadowRadius: 2.5,
        elevation: 1.5,
    },
});                        

HomeScreen.js

import React, { Component } from 'react';
import { View } from 'react-native';

//custom component imports
import Toggle from '../components/customSwitch';

export class HomeScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isEnabled: false,
        };
    }

    toggleSwitch = () => { this.setState({ isEnabled: !this.state.isEnabled }) }

    render() {
        return (
            <View>
               <Toggle isOn={this.state.isEnabled} onToggle={this.toggleSwitch} />
            </View>
        );
    }
}

export default HomeScreen;