Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Constants,
Modal,
Text,
Typography,
View,
} from 'react-native-ui-lib';
import BaseInput from './BaseInput';
import TextArea from './TextArea';
const DEFAULT_COLOR_BY_STATE = {
default: Colors.dark40,
focus: Colors.blue30,
error: Colors.red30,
};
const DEFAULT_UNDERLINE_COLOR_BY_STATE = {
default: Colors.dark70,
focus: Colors.blue30,
error: Colors.red30,
};
/**
* @description: A wrapper for Text Input component with extra functionality like floating placeholder
* @extends: TextInput
* @extendslink: https://facebook.github.io/react-native/docs/textinput.html
* @modifiers: Typography
* @gif: https://media.giphy.com/media/xULW8su8Cs5Z9Fq4PS/giphy.gif, https://media.giphy.com/media/3ohc1dhDcLS9FvWLJu/giphy.gif, https://media.giphy.com/media/oNUSOxnHdMP5ZnKYsh/giphy.gif
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/InputsScreen.js
*/
export default class TextField extends BaseInput {
static displayName = 'TextField';
static propTypes = {
...RNTextInput.propTypes,
);
})}
);
}
}
const styles = StyleSheet.create({
container: {
},
typographyEntry: {
paddingVertical: 15,
paddingHorizontal: 25,
borderColor: Colors.dark70,
borderBottomWidth: 1,
},
});
Modal,
Image,
Text,
Typography,
View,
} from 'react-native-ui-lib';
import BaseInput from './BaseInput';
import TextArea from './TextArea';
const DEFAULT_COLOR_BY_STATE = {
default: Colors.dark40,
focus: Colors.blue30,
error: Colors.red30,
};
const DEFAULT_UNDERLINE_COLOR_BY_STATE = {
default: Colors.dark70,
focus: Colors.blue30,
error: Colors.red30,
};
const LABEL_TYPOGRAPHY = Typography.text80;
export default class TextInput extends BaseInput {
static displayName = 'TextInput';
static propTypes = {
...RNTextInput.propTypes,
...BaseInput.propTypes,
/**
* make component rtl
*/
rtl: PropTypes.bool,
/**
* should placeholder have floating behavior
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
padding: 20,
backgroundColor: Colors.dark70,
},
iconBadgeColumnContainer: {
flex: 1,
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'column',
},
});
}
}
const styles = StyleSheet.create({
text: {
textAlign: 'left',
fontSize: 22,
padding: 20,
},
row: {
height: 56,
justifyContent: 'center',
},
separator: {
borderBottomWidth: 1,
borderBottomColor: Colors.dark70,
},
sectionContainer: {
backgroundColor: Colors.dark20,
paddingVertical: 4,
paddingLeft: 12,
},
sectionText: {
...Typography.text60,
color: Colors.white,
},
});
mode={TabBar.modes.SCROLL}
selectedIndex={selectedIndex1}
onChangeIndex={index => this.setState({selectedIndex1: index})}
style={{height: 48, width: Constants.screenWidth - 40}}
useGradientFinish
enableShadow
>
this.setState({selectedIndex2: index})}
style={{height: 48}}
indicatorStyle={{borderBottomWidth: 2, borderColor: Colors.purple30}}
useGradientFinish
function createStyles({
placeholderTextColor,
hideUnderline,
centered,
floatingPlaceholder,
}) {
return StyleSheet.create({
container: {},
innerContainer: {
flexDirection: 'row',
borderBottomWidth: hideUnderline ? 0 : 1,
borderColor: Colors.dark70,
justifyContent: centered ? 'center' : undefined,
paddingTop: floatingPlaceholder ? 25 : undefined,
flexGrow: 1,
},
focusedUnderline: {
borderColor: Colors.blue30,
},
errorUnderline: {
borderColor: Colors.red30,
},
input: {
flexGrow: 1,
marginBottom: hideUnderline ? undefined : Constants.isIOS ? 10 : 5,
padding: 0,
textAlign: centered ? 'center' : undefined,
backgroundColor: 'transparent',
render() {
return (
);
}
}
/>
);
}
}
const styles = StyleSheet.create({
block: {
borderColor: Colors.dark70,
backgroundColor: Colors.dark80
}
});
export default SettingsScreen;