CODEWITHSUNDEEP
react-native
hirarqi
hirarqi

Reputation: 281

Linear Gradient BorderColor on TextInput In React Native

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>

Upvotes: 6

Views: 13553

Answers (3)

IROKA
IROKA

Reputation: 1

import React from 'react';
import {Text} from 'react-native';
import MaskedView from '@react-native-community/masked-view';
import LinearGradient from 'react-native-linear-gradient';


export const GradientText = (props) => {
  return (
    <MaskedView
      maskElement={
        <Text
          {...props}
          style={[
            {
              color: 'white',
              width: '100%',
              fontFamily: 'Roboto',
              fontWeight: 'bold',
              fontSize: 16,
              textAlign: 'center',
            },
            props.style,
          ]}
        />
      }>
      <LinearGradient
        colors={['#EE856E', '#BA0F79', '#0C20A0', '#5c7fd3']}
        start={{x: 1, y: 0}}
        end={{x: 0, y: 0}}>
        <Text {...props} style={[props.style]} />
      </LinearGradient>
    </MaskedView>
  );
};

export default GradientText;

Upvotes: 0

Harshal Valanda
Harshal Valanda

Reputation: 5451

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',
    }
});

Upvotes: 3

Kishan Bharda
Kishan Bharda

Reputation: 5690

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>

Upvotes: 6

Related Questions