Creé un componente llamado 'Card', y lo uso en dos archivos, uno llamado Form.js y otro llamado Overview.js y en ambas tengo una variable que se llama cardBody, que funciona como metodo, y lo paso así:
En Form.js:
render() {
// const navigation = this.props.navigation;
return (
<Layout style={style.container}>
<Card body={cardBody()}></Card>
</Layout>
)
}
Y mi variable cardBody es así:
cardBody = (question = null) => {
<View>
<QuestionForm type='text'></QuestionForm>
</View>
}
En Overview.js
return (
<Layout style={style.container}>
<ScrollView>
<TouchableHighlight onPress={() => { this.navigation.navigate('FormsAnswer') }}>
<Card header={cardHeader()} body={cardBody('00S##### - ENERGON - IND')}></Card>
</TouchableHighlight>
</ScrollView>
</Layout>
)
Y mi variable cardBody aquí es:
cardBody = (plantName) => (
<View>
<Text style={{ fontWeight: 'bold' }}>Planta</Text>
<Text>{plantName}</Text>
</View>
);
El problema es que, según el último archivo que guardé(entre estos dos), es lo que renderiza.
Cabe decir que en la navegación, estos dos archivos son hermanos (forman parte del mismo routeador de react-navigation).