how to use guide example ? about react-native-pincode HOT 7 CLOSED

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.