- Getting Started
- Declarative Rendering
- Basic Components
- Conditionals and Loops
- Composing with components
- Handling user input
- Component As Prop
- Device APIs
- React Native
- Ready for more?
- Vue Native Router
- Community Libraries
- How does it work?
- How to contribute
Component As Prop
render prop API eliminates the need to use JSX. There are mainly two attributes used here based on whether it needs a fuction or a component.
If the component used expects a
render-prop-fn can be used.
Take this example of a
flat-list where the
renderItem provides a
callback and expects a component to be returned.
render-prop-fn can be provided directly to the component to be rendered as shown above. The component that specify
renderItem along with it’s children are mapped to the
renderItem attribute of the
args provides the
item that is provided by callback and can be used as shown.
If you want to specify multiple arguments you can declare
arguments='arg1,arg2' along with
<view render-prop-fn="renderItem" arguments="arg1,arg2">
render-prop is similar to
render-prop-fn that eliminates the use of JSX but used when the prop expects a component instead of callback. When an attribute in the component expects a component, like in the
ListFooterComponent, we make use of
The component that specify the
ListFooterComponent along with it’s children are mapped to the
In the above example we have used both
render-prop. Similarly you can define multiple children with any of the above API’s but must be supported by the parent component.