Comments (7)
Hi,
I'll make a full example project as soon as possible.
In the mean time, I don't really know what to tell you.
Basic usage is:
import PINCode from '@haskkor/react-native-pincode'
<PINCode status={'choose'}/>
or:
import PINCode from '@haskkor/react-native-pincode'
<PINCode status={'enter'}/>
to see the 2 different modes.
If you want to know how to switch between the 2 different statuses, you could use 2 different pages as we do or store a global status depending on you app flow in a state somewhere I suppose :).
Cheers,
Jeremy
from react-native-pincode.
Hi,
How to use bottomLeftComponent?
from react-native-pincode.
Hi,
Here is an example.
class App extends React.PureComponent<IProps, IState> {
render() {
return (
<View style={styles.container}>
<PINCode status={'choose'} stylePinCodeEmptyColumn={styles.bottomLeft}
bottomLeftComponent={
<View style={{backgroundColor: 'red'}}><Text style={{color: 'yellow'}}>test</Text></View>
}/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF'
},
bottomLeft: {
marginLeft: grid.unit / 2,
marginRight: grid.unit / 2,
alignItems: 'center',
width: grid.unit * 4,
height: grid.unit * 4
}
})
stylePinCodeEmptyColumn
=> this is the style of the view
bottomLeftComponent
=> this is the component
This is the result:
Cheers,
Jeremy
from react-native-pincode.
Thank you for your reply, I follow your steps and even copy the source code directly, but my screen will still not display the button, is there a problem?
I set grid.unit = 16
from react-native-pincode.
@cshung1994 sadly the bottomLeftComponent
property doesn't check for functions. You might be passing a function instead of a component.
This fails:
bottomLeftComponent={() => (
<View style={{backgroundColor: 'red'}}><Text style={{color: 'yellow'}}>test</Text></View>
)}
This works:
bottomLeftComponent={
<View style={{backgroundColor: 'red'}}><Text style={{color: 'yellow'}}>test</Text></View>
}
from react-native-pincode.
This works:
bottomLeftComponent={ <View style={{backgroundColor: 'red'}}><Text style={{color: 'yellow'}}>test</Text></View> }
Actually no, this doesn't. It gives "not a function" error.
And actual working example is the one the previous comment were noted to fail:
bottomLeftComponent={() => (
<View style={{backgroundColor: 'red'}}><Text style={{color: 'yellow'}}>test</Text></View>
)}
from react-native-pincode.
@Xeizzeth great! Hopefully it was patched
from react-native-pincode.
Related Issues (20)
- How to get number of attempts callback?
- integration with expo LocalAuthentication
- change of subtitle in first entering the PIN
- Ability to adjust the opacity
- console.error : "fontFamily "Material Icons" is not a system font and has not been loaded through Font.loadAsync
- Cannot resolve the path to "@react-native-community/async-storage" package
- async storage community to react native async storage HOT 2
- How to change pinlock title ?
- How to add delete method to my custom delete button
- How do i reset the pin. HOT 1
- how to set pin manually?
- Touch ID title - Usage
- AsyncStorage issue
- callbackErrorTouchId doesn't catch all possible errors.
- callbackErrorTouchId doesn't catch all possible errors.
- Title and Subtitle Font not Applying on ios HOT 2
- Freeze while setting and entering pincode HOT 1
- Clean status of the component after is used successfully HOT 1
- Package dependencies
- Incompatible with Expo HOT 1
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-pincode.