Plist.Info/AndroidManifest.xml

[fusionbeam]

Loving your starter-kit so far. What one should do if a component requires some iOS/Android specific project settings. ? (I.e. I am using a camera component that requires some configurations to be put in Plist.Info/AndroidManifest.xml.)

[larixer]

@fusionbeam The kit uses Expo. So you can refer to Expo docs to find out what customization it supports: https://docs.expo.io/versions/latest/sdk/camera.html If this doesn't cover your needs, you should eject from Expo to ExpoKit by executing: yarn exp detach https://docs.expo.io/versions/latest/guides/expokit.html Theoretically this should work, but in practice we haven't tested how good it works now.

[fusionbeam]

thank you.

[fusionbeam]

I've tried to add Expo's camera into the project. Created a client module. The moment I import Expo from 'expo' it complains

^^^^^^

SyntaxError: Unexpected token import

Am I missing something again?

[larixer]

@fusionbeam Well, you should not do it from the component that is included also for Web, since Expo is only available on mobile platforms. What file did you modify / add?

[fusionbeam]

All I did was this inside the generated mobile component container:

import React from 'react';
import Expo from 'expo';
import { graphql, compose } from 'react-apollo';

import CameraScreenView from '../components/CameraScreenView';

class CameraScreeen extends React.Component {

    componentDidMount() {
        Expo.FileSystem.makeDirectoryAsync(Expo.FileSystem.documentDirectory + 'photos').catch(e => {
            console.log(e, 'Directory exists');
        });
    }

  render() {
    return <CameraScreenView {...this.props} />;
  }
}

const CameraWithApollo = compose()(CameraScreeen);

export default CameraWithApollo;

[larixer]

@fusionbeam Yes, but this is critical on what platforms this component is built. It should be built only on mobile platforms, not on Web

[fusionbeam]

I see. how do I reduce a newly created component scope to mobile only? I've used cli addmodule camera client

[larixer]

@fusionbeam How this file is named and where from which file do you import it?

[larixer]

@fusionbeam I think addmodule cli cannot deal with this properly. Check out the code in src/client/modules/counter, see that it has mobile-only index.jsx and web-only index.web.jsx in the root of counter folder. You need to do the same for your component.

[fusionbeam]

import CameraScreen from './containers/CameraScreen'; it is imported in both index.jsx and index.web.jsx. can i delete the index.web.jsx? or shall i create a dummy component for the web

[larixer]

@fusionbeam Create dummy component for index.web.jsx, if you delete it, index.jsx will be used on ALL platforms

[fusionbeam]

got it. thanks again.

[fusionbeam]

it is compiling fine now, but the view is unable to access the component's state. (a variable inside the component class). I'm guessing it has to do with the ApolloClient wrapper ... Is there an example in the starter kit for a component that doesn't use Apollo?

const CameraScreenView = () => {
    return (
        <View style={styles.container}>
          <View style={styles.element}>
            <Camera
                ref={ref => {
                    this.camera = ref;
                }}
                style={{
                    flex: 1
                }}
                type={this.state.type}
                flashMode={this.state.flash}
                autoFocus={this.state.autoFocus}
                zoom={this.state.zoom}
                whiteBalance={this.state.whiteBalance}
                ratio={this.state.ratio}
                focusDepth={this.state.depth}
            >
...

[larixer]

@fusionbeam I have a question looking at this code, how are you going to access state if your component is stateless? If you are going to work with state, you should have stateful component: class CameraScrennView extends React.Component {

[fusionbeam]

That was the component view. The component container is

class CameraScreeen extends React.Component {

    state = {
        flash: 'off',
        zoom: 0,
        autoFocus: 'on',
        depth: 0,
        type: 'back',
        whiteBalance: 'auto',
        ratio: '16:9',
        ratios: [],
        photoId: 1,
        showGallery: false,
        photos: []
    };

    componentDidMount() {
        Expo.FileSystem.makeDirectoryAsync(Expo.FileSystem.documentDirectory + 'photos').catch(e => {
            console.log(e, 'Directory exists');
        });
    }
.... 

[fusionbeam]

never mind. i've figured it out. thanks a lot for your time and patience.