Closed hodatorabi closed 6 years ago
Inbal-Tish
commented
6 years ago @hodatorabi Can you elaborate or send some screenshots? The input should be rendered, the update only moved the masked text to the back while the input will get the user interactions.
hodatorabi
commented
6 years ago @Inbal-Tish yes. here is a screenshot of how it used to work:
and this one is from how it's rendering now:
I haven't changed my code so I thought it may be due to the recent updates but downgraded my package as well and it has a problem so sth may be actually wrong on my side.
Inbal-Tish
commented
6 years ago I'll take a look. Can you send me a code snippet for your MaskedInput?
hodatorabi
commented
6 years ago Sure. I'll send the whole thing it that's ok :-D
//@flow
import React from 'react' import {StyleSheet, Text, View} from 'react-native' import {SCREEN_WIDTH} from 'src/assets/styles/style' import {MaskedInput} from 'react-native-ui-lib' import {Line, Svg} from 'react-native-svg'
type Props = { maxLength: number, underlineColor: string, secureText: boolean, fontColor: string, onValueChange: Function, maskedInputContainerStyle?: Array
type State = { cleared: boolean }
const underlineWidth = SCREEN_WIDTH * 0.1
class OtpInput extends React.Component<Props, State> {
mInput: any
focus: Function
clear: Function
renderUnderlines: Function
renderNumbers: Function
constructor(props: any) {
super(props)
this.state = {
cleared: false
}
this.mInput = null
this.focus = this.focus.bind(this)
this.clear = this.clear.bind(this)
this.renderUnderlines = this.renderUnderlines.bind(this)
this.renderNumbers = this.renderNumbers.bind(this)
}
focus() {
this.mInput.focus()
}
clear() {
this.mInput.clear()
this.setState({cleared: true})
}
renderUnderlines() {
let underlines = []
for (let i = 0; i < this.props.maxLength; i++) {
underlines.push(<Line
x1={i * (underlineWidth + 7)}
y1={0}
x2={i * (underlineWidth + 7) + underlineWidth}
y2={0}
stroke={this.props.underlineColor}
strokeWidth={3}
/>)
}
return underlines
}
renderNumbers(value: string) {
value = this.state.cleared ? '' : value
let paddedValue = []
for (let i = 0; i < value.length; i++) {
if (this.props.secureText)
paddedValue.push('\u25CF')
else
paddedValue.push(value[i])
}
return (
<View
style={[style.maskedInputContainer, {width: SCREEN_WIDTH * this.props.maxLength * 0.1 + this.props.maxLength * 7}, this.props.maskedInputContainerStyle]}>
<View style={[style.maskedInputNumbersStyle, {
width: SCREEN_WIDTH * this.props.maxLength * 0.1 + this.props.maxLength * 7,
}]}>
{
paddedValue.map(i => {
return <Text style={[style.maskedInputTextStyle, {
color: this.props.fontColor,
}]}>{i}</Text>
})
}
</View>
<Svg
height="10"
width={SCREEN_WIDTH * this.props.maxLength * 0.1 + this.props.maxLength * 7}
>
{this.renderUnderlines()}
</Svg>
</View>
)
}
render() {
return (
<MaskedInput
{...this.props}
ref={(ref: any) => (this.mInput = ref)}
renderMaskedText={this.renderNumbers}
caretHidden
keyboardType={'numeric'}
maxLength={this.props.maxLength}
value={''}
onChangeText={(value) => {
if (this.state.cleared === true)
this.setState({cleared: false})
this.props.onValueChange(value)
}}
/>
)
}}
export default OtpInput
const style = StyleSheet.create({
textInputStyle: {
justifyContent: 'center',
textAlign: 'center',
width: SCREEN_WIDTH,
height: 110
},
maskedInputContainer: {
alignItems: 'center',
},
maskedInputNumbersStyle: {
flexDirection: 'row',
height: 35
},
maskedInputTextStyle: {
fontSize: 20,
fontFamily: 'IRANSansMobile',
width: underlineWidth + 7,
paddingRight: 7,
textAlign: 'center'
}
})
Inbal-Tish
commented
6 years ago @hodatorabi Hi. We pushed a fix. Please update your version and let me know if that solves your issue.
I've been working with maskedInput fine but after updating to your latest version (react-native-ui-lib@^3.3.248) the input is rendering as well as the view that I want to be rendered.