CODEWITHSUNDEEP
react-native
pandakun
pandakun

Reputation: 55

React native floating text input Styling

Hi everyone I'm trying to use this package. It works like this

My code

import {FloatingLabelInput} from 'react-native-floating-label-input';

//styled components Box=view
  <Box my={5} mx={20} bg={'#FFFFF'}>
             
              <FloatingLabelInput
                label={'password'}
                isPassword
                togglePassword={this.state.show}
                value={this.state.password}
                
                onChangeText={(password) => this.setState({ password })}

                customShowPasswordComponent={<ShowPw/>}
                customHidePasswordComponent={<HidePw/>}
            
              />
            </Box>

Output

enter image description here

It's accually fine but theres some white border around. I want to make it like this.It will be icon also here I can make it but I can't make the border

enter image description here

Upvotes: 0

Views: 2363

Answers (1)

Ketan Ramteke
Ketan Ramteke

Reputation: 10685

This is happening because inside the package itself the border color is set to #49658c

to fix that, go to the following file inside your project:

node_modules\react-native-floating-label-input\src\styles.tsx

change borderColor to white:

export const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    color: '#49658c',
    borderColor: '#ffffff',
    borderWidth: 2,
    borderRadius: 12,
    paddingHorizontal: 11,
    backgroundColor: '#00000000',
    paddingTop: 10,
    paddingBottom: 10,
    alignContent: 'center',
    justifyContent: 'center',
  },

//....

now start your project again.

Final result after I made these changes:

enter image description here

Upvotes: 1

Related Questions