Linear Gradient BorderColor on TextInput In React Native

user_11640072 0
Viewed 5259

Im beginner in React Native. Here I want to make a Linear gradient borderColor on TextInput, how do I implement it?

<View >
    <TextInput
        style={{fontSize: 16, color: '#000', borderWidth: 5}}
    />
</View>
react-native
2 Answers

There is no way to make border color gradient in react native. But you can achieve same functionality by creating your custom TextInput component which will be rendered into a gradient background view (you can create it using react-native-linear-gradient) and have some padding, so it look like TextInput have border. For example :

MyInput.js

<LinearGradient
  colors={['#4c669f', '#3b5998', '#192f6a']}
  style={{padding: 2}} // add padding so it work as border of TextInput
  ..
  ..
>
  <TextInput
  ..
  ..
  />
</LinearGradient>
user_81822480

A <LinearGradient> component for react-native. set child view as per your requirement

react-native-linear-gradient

enter image description here

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <LinearGradient
                    colors={['#00FFFF', '#17C8FF', '#329BFF', '#4C64FF', '#6536FF', '#8000FF']}
                    start={{ x: 0.0, y: 1.0 }} end={{ x: 1.0, y: 1.0 }}
                    style={styles.grediant}
                >
                    <TouchableOpacity style={styles.buttonContainer}>
                        <Text style={styles.buttonText}>
                            LOGIN
                         </Text>
                    </TouchableOpacity>
                </LinearGradient>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1.0,
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
    },
    grediant: {
        height: 44,
        width: 300,
        justifyContent: 'center',
        alignSelf: 'center'
    },
    buttonContainer: {
        flex: 1.0,
        alignSelf: 'center',
        justifyContent: 'center',
        backgroundColor: '#ffffff',
        width: '99%',
        margin: 1
    },
    buttonText: {
        textAlign: 'center',
        color: '#4C64FF',
        alignSelf: 'center',
    }
});
user_54614000
Related