# React Native Examples

React Native support has been deprecated. Please see [our FAQ Entry](/content/docs/knowledge-base/faqs/does-phenix-support-react-native/index.html) for more information.

Phenix supports only Pure React Native apps. Expo will not work.

## Known Issues

Developers using React Native have encountered some issues caused by external dependencies.

The RTCView used in the Phenix sample apps is supplied by [react-native-webrtc](https://github.com/react-native-webrtc/react-native-webrtc). Phenix uses RTCView much like a `<video>` object in HTML; we supply the source for the video to the selected display, e.g., SurfaceView for Android and CLayer on iOS, `<video>` on HTML/JS.

##### Microphone Issue

Some developers are unable to manage microphone permissions on iOS due to a [known bug in the WebRTC implementation](https://bugs.chromium.org/p/webrtc/issues/detail?id=10396), which is unlikely to be addressed by WebRTC.

## Web SDK

The code below is a full working example using React Native and the Phenix Web SDK.

> package.json

Copy

```
{
"dependencies": {
    "phenix-web-sdk": "^2018.3.9",
    "react-native-webrtc": "1.58.3"
  }
}
```

> App.js

Copy

```
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
  RTCView,
  MediaStream,
  MediaStreamTrack,
  getUserMedia,
} from 'react-native-webrtc';

global = Object.assign(global, {
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
  RTCView,
  MediaStream,
  MediaStreamTrack,
  getUserMedia,
});
import sdk from './phenix-web-sdk-react-native.min';

sdk.RTC.shim();

export default class App extends React.Component {
  constructor(props) {
    super(props);

this.state = { webrtcSupported: sdk.RTC.webrtcSupported, videoURL: '' };
  }

render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <Text>{this.state.webrtcSupported ? 'YES' : 'NO'}</Text>
        <RTCView style={styles.video} streamURL={this.state.videoURL} />
      </View>
    );
  }

componentDidMount() {
    const channelExpress = new sdk.express.ChannelExpress({
      backendUri: 'https://pcast.phenixrts.com/demo',
      authenticationData: {},
    });
    this.setState({ webrtcSupported: sdk.RTC.webrtcSupported });
    channelExpress.joinChannel(
      {
        alias: 'channel1',
        capabilities: [],
      },
      (error, response) => {
        if (response && response.channelService) {
          this.channelService = response.channelService;
        }
      },
      (error, response) => {
        if (response && response.mediaStream) {
          console.log('VIDEO URL', response.mediaStream.getStream().toURL());
          this.setState({ videoURL: response.mediaStream.getStream().toURL() });
        }
      }
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  video: {
    height: 360,
    width: '100%',
  },
});
```

## Examples on GitHub

The following React Native examples are available in the Phenix GitHub repository:

- [Channel Publisher](https://github.com/PhenixRTS/MobileChannelPublisher/tree/master/ReactNative/ChannelPublisher)
- [Channel Viewer](https://github.com/PhenixRTS/MobileChannelViewer/tree/master/ReactNative/ChannelViewer)