How to add gradient on the textInput using React Native

0
votes

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 problematic image][1]][1]
[![This is what is needed][2]][2]

----------


  [1]: https://i.stack.imgur.com/DzouR.jpg
  [2]: https://i.stack.imgur.com/vjSfR.png
reactjsreact-nativedropdown