Ho do I add Camera button on launchImageLibraryAsync screen? (or adding style?)

Expo SDK
1

Hi,

When I open ImagePicker.launchImageLibraryAsync, I wish I can put Camera button at the top and set the action for launchCameraAsync. I think it’s calling system UI. So it’s not possible?

Also how can I style the color of the top navigation from black to purple. Is it possible? :frowning:

Screenshot from 2017-10-18 13-27-22
Screenshot from 2017-10-18 13-27-22390×650 20.5 KB

And… I just want to thanks to Expo team. You guys did a wonderful job. I can’t imagine developing React Native without Expo now. Thanks!

2

I think a good approach would be to divide the screen into two parts, and use the expo Camera component on the top half with the React Native camera roll on the bottom. You’re correct that the ImagePicker uses the system UI, which looks like it takes up the whole screen.

1 Like
3

For the nav bar configuration, check out navigationOptions

https://reactnavigation.org/docs/navigators/navigation-options

1 Like
4

Interesting. Can I put navigationOptions in launchImageLibraryAsync statement? I thought I can’t add it because it’s System UI. Where should I put navigationOptions here?

let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
5

Sorry, I don’t understand what you mean. The navigationOptions is a static prop you’ll put on the React Component that will be rendered.

6

According to Expo doc, when I call Image Library, it’s calling System UI not React Component. So I think I can’t set the navigationOptions in the System UI (it doesnt make sense to me).

(Image Picker): https://docs.expo.io/versions/latest/sdk/imagepicker.html

7

Ah, I see what you mean. (I just tried the snack example on my phone). It doesn’t look like its exposed, but probably should be. Can add as a feature request

1 Like