score:22

Accepted answer

You can access the inner text via this.props.children and you can pass properties either manually (via this.props) or using ... operator. More of this is described in react.js documentation (note - not React Native docs!). The most relevant parts of the documentation are:

It's general approach of React Native documentation that rather than describing all react concepts, they described only the React Native parts and the actual concept is described in the web/original version of React.

score:0

For me I'd just put the children inside the component and call it a day. Also keep in mind sometimes there's different implementations between iOS and Android. Here's something I just wrote and briefly tested

import React, { FunctionComponent } from "react";
import { TouchableNativeFeedback, Platform, TouchableOpacity } from "react-native";


interface IAgnoButton {
    onPress: (item: any) => void,
    style: object
}

const AgnoButton: FunctionComponent<IAgnoButton> = (props) => {
    return (
        Platform.OS === 'android' ?
            <TouchableNativeFeedback
                onPress={props.onPress}
                style={{ ...props.style }}
                >
                { props.children }
            </TouchableNativeFeedback> :
            <TouchableOpacity
                onPress={props.onPress}
                style={{ ...props.style }}
                >
                { props.children }
            </TouchableOpacity>
    );
}
export default AgnoButton;

score:1

you can checkout this repo from github: https://github.com/future-challenger/react-native-tabs

some code here:

<View style={[styles.tabbarView, this.props.style, this.state.keyboardUp && styles.hidden]}>
    {React.Children.map(this.props.children.filter(c=>c),(el)=>
    <TouchableOpacity key={el.props.name + "touch"}
        testID={el.props.testID}
        style={[styles.iconView, this.props.iconStyle, (el.props.name || el.key) == selected ? this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {} ]}
        onPress={()=>!self.props.locked && self.onSelect(el)}
        onLongPress={()=>self.onSelect(el)}
        activeOpacity={el.props.pressOpacity}>
            {selected == (el.props.name || el.key) ? React.cloneElement(el, {selected: true, style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle]}) : el}
    </TouchableOpacity>
)}

React.Children.map(this.props.children.filter...) is the key to deal with children components.


Related Query

More Query from same tag