Comments (11)
Same here, or even better can we get the support for multiline? Auto adjust the box as it goes to the next line :)
from react-native-textinput-effects.
I don't know what I was doing wrong, because I though had tried everything. But now I made it!
<Hideo
iconSize={HideoStyle.size.icon}
height={HideoStyle.size.input}
inputStyle={[HideoStyle.input]}
style={HideoStyle.container}
/>
const height = 37;
HideoStyle = {
container: {
marginVertical: 5,
borderRadius: 4,
borderStyle: 'solid',
borderWidth: 2,
borderColor: Color.mercury,
backgroundColor: Color.white,
flex: 0,
height: 'auto',
overflow: 'hidden'
},
input: {
height: height,
backgroundColor: Color.white,
fontWeight: '600',
fontSize: 11,
},
size: {
input: height,
icon: 20
}
}
from react-native-textinput-effects.
+1
from react-native-textinput-effects.
+1
from react-native-textinput-effects.
+1 would love to have multiline support
from react-native-textinput-effects.
It'd be so nice to support multipleline.
Love this lib btw.
from react-native-textinput-effects.
same, how to adjust height ? anyone able to resolved this?
from react-native-textinput-effects.
Only one solution found:
Goto the file (for eg. kaede.js if you are using kaede) in node modules, change height from there !
from react-native-textinput-effects.
+1
I would like to adjust for Hideo, making the input smaller.
<View style={styles.inputMain}>
<Hideo
iconClass={FontAwesomeIcon}
iconName="id-card-o"
iconColor="#7f7f80"
iconSize={18}
iconBackgroundColor="#ffffff"
iconStyle={{ display: 'none' }}
inputStyle={styles.input}
style={styles.inputContainer}
inputHeight={26}
placeholder="NOME COMPLETO"
/>
</View>
<View style={styles.inputMain}>
<Hideo
iconClass={FontAwesomeIcon}
iconName="id-card-o"
iconColor="#7f7f80"
iconSize={18}
iconBackgroundColor="#ffffff"
inputStyle={styles.input}
placeholder="NOME COMPLETO"
/>
</View>
const styles = StyleSheet.create({
inputMain: {
borderRadius: 4,
borderStyle: 'solid',
borderWidth: 2,
borderColor: '#e3e3e3',
/*padding: 1,*/
marginBottom: 15,
overflow: 'hidden',
height: 26,
alignContent: 'flex-start',
alignItems: 'flex-start',
alignSelf: 'flex-start',
},
inputContainer: {
flex: 1,
backgroundColor: 'red',
padding: 1,
alignContent: 'flex-start',
alignItems: 'flex-start',
alignSelf: 'flex-start'
},
input: {
height: 26,
width: 200,
fontSize: 12,
justifyContent: 'center',
alignItems: 'center'
},
});
from react-native-textinput-effects.
if you want to change height, fontSize, Color, etc. you can go to: node_modules/react-native-textinput-effects\lib, open the .JS file effect you are using, for example Hoshi.js. There you can edit the styles.
for example Hoshi.js:
const styles = StyleSheet.create({
container: {
borderBottomWidth: 2,
borderBottomColor: '#b9c1ca',
},
labelContainer: {
position: 'absolute',
},
label: {
fontSize: 20,
color: '#000000',
},
from react-native-textinput-effects.
There isn't a generic solution I can apply for all components for changing the height as it's highly coupled with the animation. And changing input height would break some of those animations.
So I suggest forking the repository and applying your customizations directly on the input to make it work without breaking the animation.
from react-native-textinput-effects.
Related Issues (20)
- Issue Rendering the Sae Input Component HOT 3
- Text overflow on Android HOT 1
- Cannot Mask Input with react-native-masked-text HOT 1
- Hoshi has a small area on the top left that is colored white instead of the color used for the textinput HOT 1
- componentWillReceiveProps is not secure anymore HOT 3
- It changes the default keyboard language HOT 2
- How can I change the text alignment for the Akira input? HOT 1
- ExceptionsManager.js:126 Warning: Failed prop type: The prop `iconClass` is marked as required in `Sae`, but its value is `undefined`. HOT 1
- Make input type password HOT 1
- Text Inputs with border radius. HOT 1
- Unable to move lable container HOT 1
- How Would I add Type Password here? HOT 2
- unable to change font family HOT 3
- Hoshi label color to change on Focus? HOT 1
- Prop 'selectTextOnFocus' doesn't work on iOS
- Use with multiline
- how to include righticon
- Sae Label Font Size HOT 1
- How to remove any border in input?
- How I can set the height and keep label center
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-textinput-effects.