Pressable
Pressable is one of React Native core components but optimized to work on multiplatform environment.
Usage
import * as React from 'react';
import { App, Screen, Text, Pressable, StyleSheet } from '@flexn/create';
const MyComponent = () => {
return (
<App>
<Screen style={styles.container}>
<Pressable style={styles.button} onPress={() => console.log('Pressed')}>
<Text>Press me</Text>
</Pressable>
</Screen>
</App>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
button: {
marginHorizontal: 20,
borderWidth: 2,
borderRadius: 25,
borderColor: '#111111',
height: 50,
width: 200,
justifyContent: 'center',
alignItems: 'center',
},
});
export default MyComponent;
Props
focus
Type: boolean
Default value: true
Property which tells Focus Manager if component should be included in focus engine finding next focusable element.
parentContext
Type: ParentContext
This property allows Focus Manager to understand what's the structure of the screen. Usually Focus Manager iterates all the components
and passes down parentContext
of the parent component to it's children. But if you have to created custom component you must pass it down by
yourself.
import * as React from 'react';
import { App, Screen, Text, Pressable, StyleSheet } from '@flexn/create';
const MyCustomComponent = ({ parentContext }: { parentContext?: any }) => {
return (
<Pressable parentContext={parentContext} style={styles.button} onPress={() => console.log('Pressed')}>
<Text>Press me</Text>
</Pressable>
);
};
const MyComponent = () => {
return (
<App>
<Screen style={styles.container}>
<MyCustomComponent />
</Screen>
</App>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
button: {
marginHorizontal: 20,
borderWidth: 2,
borderRadius: 25,
borderColor: '#111111',
height: 50,
width: 200,
justifyContent: 'center',
alignItems: 'center',
},
});
export default MyComponent;
onPress
Type: () => void
Event fired when Pressable was pressed.
onFocus
Type: () => void
Event fired when Pressable gains focus.
onBlur
Type: () => void
Event fired when Pressable loose focus.
focusOptions
Type: ViewFocusOptions
Property which holds following related properties:
focusOptions.forbiddenFocusDirections
Type: ForbiddenFocusDirections[]
Can contain one or more directions. When component is focused and direction is set an example to right
then pressing right button on your remote will do nothing just keep focus as it is.
focusOptions.focusKey
Type: string
An unique string which can be used to force focus on specific element by focusKey
.
focusOptions.hasInitialFocus
Type: boolean
Forces element to gain focus once screen is loaded.
focusOptions.animatorOptions
Type: any
Default value: Scale
Animator Options can define how your component will behave when it gains focus. It has multiple animation variations which can be controlled by following configurations:
- Scale
<Pressable
focusOptions={{
animatorOptions: {
type: 'scale',
scale: 1.1, // Optional. Any value from 1
duration: 150, // Optional. How long time border transition should take
}
}}
/>
- Scale with border
<Pressable
style={{
borderColor: '#0A74E6',
borderWidth: 1,
}}
focusOptions={{
animatorOptions: {
type: 'scale_with_border',
scale: 1.1, // Optional. Any value from 1
duration: 150, // Optional. How long time border transition should take
}
}}
/>
- Border
<Pressable
style={{
borderColor: '#0A74E6',
borderWidth: 1,
}}
focusOptions={{
animatorOptions: {
type: 'border',
duration: 150, // Optional. How long time border transition should take
}
}}
/>
- Background
<Pressable
style={{
backgroundColor: '#FFFFFF'
}}
focusOptions={{
animatorOptions: {
type: 'background',
backgroundColorFocus: '#0A74E6', // Required. Color which will be applied when element gains focus
duration: 150, // Optional. How long time border transition should take
}
}}
/>