How to add gradient on the textInput using React Native

user_11763213 0
Viewed 59

I have textInput field on which I want to apply the gradient on all 4 sides just like border on any box. The gradient does apply partially but it shows a weird thick upper border and it does even not show it on all 4 sides of the box. Also, all other sides are without a gradient. The code I am trying is:

<View style={{ marginBottom: 20 }}>
  <Text
    style={[
      styles.firstNameLabel,
      firstNameError ? styles.errorColor : styles.inputLabelColor,
    ]}
  >
    First Name
  </Text>
  <LinearGradientView
     style={{ borderRadius: 5 }}
     colors={['rgba(9, 95, 216, 1)', 'rgba(128, 69, 224, 1)']}
     end={{
       x: 1.5,
       y: 2,
     }}
     start={{
       x: 1.2,
       y: 1.5,
     }}
   >
   <View
     style={{
       paddingHorizontal: 0,
       paddingVertical: 0,
       flex: 1,
       padding: 3,
     }}
   >
      <TextInput
        style={styles.firstNameInputField}
        mode="outlined"
        theme={{
          colors: {
            text: '#4D4D4D',
            primary: 'transparent',
          },
          roundness: 5,
        }}
        selectionColor="#095FD8FF"
        outlineColor="#D7D7D7"
      />
    </View>
  </LinearGradientView>
</View>

This is a problematic image: This is a problematic image

This is what is needed This is what is needed

dropdown react-native reactjs gradient
1 Answers

To get the effect you want you could just give the LinearGradient some padding to act as the borderWidth:

import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
import Constants from 'expo-constants';
import {LinearGradient} from 'expo-linear-gradient'

export default function App() {
  const firstNameError = null;
  return (
    <View style={{ padding:8,marginBottom: 20 }}>
  <Text
    style={[
      styles.firstNameLabel,
      firstNameError ? styles.errorColor : styles.inputLabelColor,
    ]}
  >
    First Name
  </Text>
  <LinearGradient
     style={{ borderRadius: 5,padding:2 }}
     colors={['rgba(9, 95, 216, 1)', 'rgba(128, 69, 224, 1)']}
     end={{
       x: 1.5,
       y: 2,
     }}
     start={{
       x: 1.2,
       y: 1.5,
     }}
   >
   <View
     style={{
       paddingHorizontal: 0,
       paddingVertical: 0,
       flex: 1,
       padding: 3,
     }}
   >
      <TextInput
        style={styles.input}
        mode="outlined"
        theme={{
          colors: {
            text: '#4D4D4D',
            primary: 'transparent',
          },
          roundness: 5,
        }}
        selectionColor="#095FD8FF"
        outlineColor="#D7D7D7"
      />
    </View>
  </LinearGradient>
</View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  input: {
    backgroundColor:'white'
  },
});
user_126113540
Related