带刻度线的本机拨动开关

Question

I want a toggle switch in react native that should show a tick mark when it is on and show cross mark when it is off.

It should be like this

[react-native toggle swtich]

Please help me how to get it.

Answer 1

Use below code and update images with your local images and let me know if you have any query.

 /** * toggle-switch-react-native * Toggle Switch component for react native, it works on iOS and Android * https://github.com/aminebenkeroum/toggle-switch-react-native * Email:amine.benkeroum@gmail.com * Blog: https://medium.com/@aminebenkeroum/ * @benkeroumamine */ import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity, Animated, Image, } from 'react-native'; import PropTypes from 'prop-types' import * as AppImages from '~/assets'; export default class ToggleSwitch extends React.Component { static calculateDimensions(size) { switch (size) { case 'small': return ({ width: 50, padding: 10, circleWidth: 15, circleHeight: 15, translateX: 22, }); case 'large': return ({ width: 100, padding: 20, circleWidth: 30, circleHeight: 30, translateX: 38, }); default: return ({ width: 60, padding: 12, circleWidth: 18, circleHeight: 18, translateX: 26, }); } } static propTypes = { isOn: PropTypes.bool.isRequired, label: PropTypes.string, onColor: PropTypes.string.isRequired, offColor: PropTypes.string.isRequired, size: PropTypes.string, labelStyle: PropTypes.object, onToggle: PropTypes.func.isRequired, icon: PropTypes.object, } static defaultProps = { isOn : false, onColor: '#634fc9', offColor: '#ecf0f1', size: 'medium', labelStyle: {}, icon: null, } offsetX = new Animated.Value(0); dimensions = ToggleSwitch.calculateDimensions(this.props.size); createToggleSwitchStyle = () => ({ justifyContent: 'center', width: this.dimensions.width, borderRadius: 20, padding: this.dimensions.padding, backgroundColor: (this.props.isOn) ? this.props.onColor : this.props.offColor, }) createInsideCircleStyle = () => ({ alignItems: 'center', justifyContent: 'center', margin: 4, position: 'absolute', backgroundColor: 'white', transform: [{ translateX: this.offsetX }], width: this.dimensions.circleWidth, height: this.dimensions.circleHeight, borderRadius: (this.dimensions.circleWidth / 2), }); render() { const toValue = this.props.isOn ? this.dimensions.width - this.dimensions.translateX : 0; Animated.timing( this.offsetX, { toValue, duration: 300, }, ).start(); return ( <View style={styles.container}> {(this.props.label) ? <Text style={[styles.labelStyle, this.props.labelStyle]}>{this.props.label}</Text> : null } <TouchableOpacity style={this.createToggleSwitchStyle()} activeOpacity={0.8} onPress={() => { this.props.onToggle(!this.props.isOn); }} > <View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row'}}> <Image style={{height: 10, width: 10}} source={AppImages.check} //TODO UPDATE WITH YOUR CHECK IMGAE /> <Image style={{height: 10, width: 10}} source={AppImages.check} //TODO UPDATE WITH YOUR CROSS IMGAE /> </View> <Animated.View style={this.createInsideCircleStyle()} >{this.props.icon}</Animated.View> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flexDirection: 'row', alignItems: 'center', }, labelStyle: { marginHorizontal: 10, }, }); 

Use above script like component and use it like

import ToggleSwitch from './ToggleSwitch'; // Update your component path

// You need to declare a state named isOn

// Use below code in render method

<ToggleSwitch
    isOn={this.state.isOn} // There should be a state like this.state.isOn(Set default value)
    onColor='green'
    offColor='red'
    label='Example label'
    labelStyle={{color: 'black', fontWeight: '900'}}
    size='large'
    onToggle={ () => this.setState({ !this.state.isOn }} } //To update state
/>```