Create Camera Singleton

[ehorodyski]

Question

To Do First

• Take a look in the README
• Take a look in the docs
• Take a look in the QA

Ask your Question
I'm working on an app that uses react-navigation (createBottomTabNavigator) to toggle between the following views:

1. Help
2. Take Picture (or navigate to camera if on other screens)
3. About

The routing is as follows, the camera icon inside <BottomNavComponent /> either navigates the user to <CameraScreen /> if there are not there, or should take a picture if the user is there.

However, I am unable how to figure out how the pass a reference to the camera from <CameraScreen />, which has a render method that uses <RNCamera />, up to <BottomNavComponent />.

Below are some relevant pieces of code:

CameraScreen.js

class CameraScreen extends Component {

  render() {
    return (
      <View style={CameraScreenStyles.ViewContainer}>
        <RNCamera
          style={CameraScreenStyles.Preview}
          ref={(ref) => { this.camera = ref; }}
          captureAudio={false}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.auto}
        />
      </View>
    );
  }

}

BottomNavComponent

export default BottomTabNavigator = createBottomTabNavigator(
  {
    ...
    Home: {
      screen: CameraScreen,
      navigationOptions: () => ({
        tabBarIcon: () => <CircleNavButton />
      })
    },
    ...
  }, {
    initialRouteName: 'Home',
    ...
}

CircleNavButton is the component that renders the circle.

App.js

const AppContainer = createAppContainer(BottomTabNavigator);
export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <AppContainer />
      </Provider>
    );
  }
}

You can find my project here. I believe it's currently public, please let me know if it's not.

Thanks for helping!

[MateusAndrade]

Are you using some navigation on the screens? like react-navigation? Or you just wrap your app around a single component?

[ehorodyski]

I'm using react-navigation.

I'm pretty new to React/React-Native so I apologize if I made any of this confusing.

[MateusAndrade]

I'm pretty new to React/React-Native so I apologize if I made any of this confusing.

I use react-native/navigation since the last year but i steel fell a newbie. hahahaha

Btw, i got on a similar use case: when the user enters on a specific screen, i started the RNCamera instance, set the ref to the component to use this on a button, etc.

On your case, you could write a function that accepts the response from RNCamera, and returns this data, as a promise for example. I think writing a component that encapsulates RNCamera, and exports the data when it captures a picture would be a better option.

The only problem that i see on your case, is if you go to your camera stack(if you are using stacks on react-navigation) and then switch to another tab, if the camera will unmount our stay open. Because keeping the camera active can cause some performance issues.

Hope it helps!

[ehorodyski]

@MateusAndrade -- I'm still a bit confused, this part of RNCamera:

<RNCamera 
    ref={(ref) => { this.camera = ref; }} 
    ... 
    />

Scopes the camera reference to the Component it's being composed in. How would I pass ref to another component?

What I suppose I could do is build a CameraManager of sorts:

import { CameraManager } from './camera.manager.js';

export default class CameraScreen extends Component {
    render() {
        return (
            <RNCamera 
                ref={(ref) => { CameraManager.camera = ref }}
             />
        );
    }
}

Then in my other component:

onButtonPress() {
    CameraManager.camera.takePictureAsync();
}

[MateusAndrade]

Scopes the camera reference to the Component it's being composed in. How would I pass ref to another component?

onButtonPress() {
    CameraManager.camera.takePictureAsync();
}

You can try pass the ref though props to a father/children. But by what i understand, you want to call the ref to take a picture, when you click on the onButtonPress. Thats right?

If you are trying to pass this ref trough components that are father/children you can pass it as a prop. But i dont think it would possible doing something similar to a Singleton. Maybe, you can call a modal and init the camera on this component

[ehorodyski]

Yeah, unfortunately I'm looking to have the parent component call takePictureAsync, but the child component is the one that init's RNCamera. I'll send some better code over tomorrow once I'm around my dev machine. But the idea is either:

1. Pass the ref up to the parent component, so the parent component can take the picture, or;
2. Have the child initialize the camera, store ref in a shared class, and let the parent call takePictureAsync from that shared instance..

[sibelius]

useEffect

[ehorodyski]

@sibelius - Do you mind sharing a link or code sample? I'm unsure what library to use for effects w/ Redux.

[MateusAndrade]

You can use react-redux or even react-hooks.

[ehorodyski]

I guess the issue would still remain -- where do I get the reference to the Camera in a parent component?

[sibelius]

ref={ref => this.props.cameraRef(ref)}

[ehorodyski]

I've updated my initial post to hopefully clear up some confusion and link to the project.

@sibelius - That was the approach I was thinking, but isn't a navigation view a child component of the navigation component? If that's the case, I still don't understand how I'd pass it up to it's parent.