Call component through function React Native

Question

I'm developing a component to publish it in npm, but I'd like to call my component using a method instead of a tag.

Example:

myComponent.js

import React from 'react'
import { View, Text } from 'react-native'

export const showComponent = () => {
    // this would be the function that I user to call my component down
}

const myComponent = (props) => {
    return(
        <View>
            <Text>Oi</Text>
        </View>
    )
}

App.js

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { showComponent } from 'my-component'

const App = () => {
    return(
        <View>
            <TouchableOpacity onPress={() => showComponent()}>
                <Text>Home</Text>
            </TouchableOpacity>
        </View>
    )
}

export defaul App

the idea is that when calling the showComponent function I show my component, and when I call, for example, the hide function, I close my component.

Why are you not passing a prop to your component to hide/show it ? — Tim
– Tim, Commented May 9, 2019 at 17:57
I would like to call it within the redux action, so I thought of the` method` (just like nativebase does with Toast), it will be a popup component — Rafael Augusto
– Rafael Augusto, Commented May 9, 2019 at 18:00

iuliu.net · Accepted Answer · 2019-05-10 08:01:20Z

1

You can do it using a single class export:

import * as React from 'react';

export default class MyComponent extends React.Component {
  state = {
    isOpen: false,
  };

  open = () => {
    this.setState({ isOpen: true });
  };

  close = () => {
    this.setState({ isOpen: true });
  };

  render() {
    const { isOpen } = this.state;

    return !isOpen ? null : (
      <View>
        <Text>Oi</Text>
      </View>
    );
  }
}

And you use it like so:

<MyComponent ref={(x) => this.myComponent = x)} />

And you open it like so:

this.myComponent.open();

answered May 10, 2019 at 8:01

iuliu.net

7,1858 gold badges52 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rafael Augusto Over a year ago

Perfect, i think that this that i wanted. i gonna go try.

Aaron Ross · Accepted Answer · 2019-05-09 18:09:29Z

0

I see in a comment above you want to call the component with a redux action, so you should call your redux action in that on click, but the component you want to show/hide needs to be linked to a redux state variable. Then in your jsx you'd have:

        <View>
            <TouchableOpacity onPress={() => showComponent()}>
                <Text>Home</Text>
            </TouchableOpacity>
            {reduxBoolean && <MyComponent />}
        </View>

answered May 9, 2019 at 18:09

Aaron Ross

1411 silver badge5 bronze badges

Comments

Divyesh Prajapati · Accepted Answer · 2022-05-13 10:44:00Z

0

import React from 'react'
import { View, Text} from 'react-native'
const example = (props) => {
    return (
        <View>
            <Text>Hello</Text>
        </View>
    )
}

// props

import React from 'react'
import { View, Text} from 'react-native'

const examples = () => {
    return(
        <View>
            <Text><example/></Text>
        </View>    
    )
}

and print is : Hello

edited May 13, 2022 at 10:44

Divyesh Prajapati

9855 silver badges14 bronze badges

answered May 7, 2022 at 16:01

ND verma

3174 silver badges12 bronze badges

Collectives™ on Stack Overflow

Call component through function React Native

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related