react-native-lingradient

Installation

npm install react-native-linear-gradient --save
react-native link react-native-linear-gradient

npm install react-native-lingradient

Usage

import Lingradient from 'react-native-lingradient'

export default class Index extends React.Component {
    constructor(p) {
        super(p)
        this.state = {
            title:'1단계',
            locations: [ 0, 0.33, 0.33, 1 ],
            colors: ['#FE608B','#DB9BE8','#F4F4F4','#F4F4F4'],
        }
    }
    componentDidMount(){
        setTimeout(()=>{
            this.setState({
            title:'2단계',
            locations: [ 0, 0.66, 0.66, 1 ],
            colors: ['rgb(254,185,143)','rgb(240,97,95)','#F4F4F4','#F4F4F4'],
            })
        },2000)
        setTimeout(()=>{
            this.setState({
            title:'3단계',
            locations: [ 0, 1, 1, 1 ],
            colors: ['rgb(109,96,210)','rgb(213,144,233)','#F4F4F4','#F4F4F4'],
            })
        },4000)
    }
    render() {
        return (<SafeAreaView style={{ flex: 1, justifyContent:'center', }}>
            <View style={{ alignItems:'center', }}>
                <Text>{this.state.title}</Text>
            </View>
            <View style={{ height: 10 }}>
                <Lingradient
                    colors={this.state.colors}
                    locations={this.state.locations}
                    style={{
                    flex: 1
                    }}
                    start={{x: 0.0, y: 0}}
                    end={{x: 1, y: 0}}
                    duration={300}
                />
            </View>
        </SafeAreaView>)
    }
}