Adds styles.

android/sdk/src/main/java/org/jitsi/meet/sdk/IncomingCallExternalAPIModule.java

@@ -1,6 +1,8 @@
 package org.jitsi.meet.sdk;
 
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ReadableMap;
 
 class IncomingCallExternalAPIModule extends AbstractExternalAPIModule<IncomingCallViewListener> {
 
@@ -31,4 +33,10 @@ class IncomingCallExternalAPIModule extends AbstractExternalAPIModule<IncomingCa
 
         return view != null ? view.getListener() : null;
     }
+
+    @Override
+    @ReactMethod
+    public void sendEvent(String name, ReadableMap data, String scope) {
+        super.sendEvent(name, data, scope);
+    }
 }

react/features/mobile/incoming-call/components/IncomingCallPage.js

@@ -5,11 +5,17 @@ import { Text, View } from 'react-native';
 import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
+import { ToolbarButton } from '../../../toolbox';
+import { ColorPalette } from '../../../base/styles';
+import { Avatar } from '../../../base/participants';
+
 import {
     incomingCallAnswered,
     incomingCallDeclined
 } from '../actions';
 
+import styles, { CALLER_AVATAR_SIZE } from './styles';
+
 type Props = {
     _callerName: string,
     _callerAvatarUrl: string,
@@ -30,17 +36,73 @@ class IncomingCallPage extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { t } = this.props;
+        const { t, _callerName } = this.props;
 
-        return ( // TODO: layout and styles
-            <View>
-                <Text>{ this.props._callerName }</Text>
-                <Text onPress = { this.props._onAnswered }>
-                    { t('incomingCall.answer') }
+        return (
+            <View style = { styles.pageContainer }>
+                <Text style = { styles.title }>
+                    { t('incomingCall.title') }
                 </Text>
-                <Text onPress = { this.props._onDeclined }>
-                    { t('incomingCall.decline') }
+                <Text style = { styles.callerName }>
+                    { _callerName }
                 </Text>
+                { this._renderCallerAvatar() }
+                { this._renderButtons() }
+            </View>
+        );
+    }
+
+    /**
+     * Renders caller avatar.
+     *
+     * @private
+     * @returns {React$Node}
+     */
+    _renderCallerAvatar() {
+        return (
+            <View style = { styles.avatar }>
+                <Avatar
+                    size = { CALLER_AVATAR_SIZE }
+                    uri = { this.props._callerAvatarUrl } />
+            </View>
+        );
+    }
+
+    /**
+     * Renders buttons.
+     *
+     * @private
+     * @returns {React$Node}
+     */
+    _renderButtons() {
+        const { t, _onAnswered, _onDeclined } = this.props;
+
+        return (
+            <View style = { styles.buttonContainer }>
+                <View>
+                    <ToolbarButton
+                        accessibilityLabel = 'Decline'
+                        iconName = 'hangup'
+                        iconStyle = { styles.buttonIcon }
+                        onClick = { _onDeclined }
+                        style = { styles.declineButton }
+                        underlayColor = { ColorPalette.buttonUnderlay } />
+                    <Text style = { styles.buttonText }>
+                        { t('incomingCall.decline') }
+                    </Text>
+                </View>
+                <View>
+                    <ToolbarButton
+                        accessibilityLabel = 'Answer'
+                        iconName = 'hangup'
+                        iconStyle = { styles.buttonIcon }
+                        onClick = { _onAnswered }
+                        style = { styles.answerButton }
+                        underlayColor = { ColorPalette.buttonUnderlay } />
+                    <Text style = { styles.buttonText }>
+                        { t('incomingCall.answer') }
+                    </Text>
+                </View>
             </View>
         );
     }

react/features/mobile/incoming-call/components/styles.js

@@ -4,11 +4,78 @@ import {
     createStyleSheet
 } from '../../../base/styles';
 
-const TEXT_COLOR = ColorPalette.white;
+export const CALLER_AVATAR_SIZE = 135;
+
+const _text = {
+    color: ColorPalette.white,
+    margin: BoxModel.margin,
+    fontSize: 16
+};
+
+const _button = {
+    alignSelf: 'center'
+};
+
+const _responseButton = {
+    ..._button,
+    justifyContent: 'center',
+    borderRadius: 30,
+    borderWidth: 0,
+    height: 60,
+    width: 60
+};
 
 export default createStyleSheet({
-    button: {
-        color: TEXT_COLOR,
-        margin: BoxModel.margin
+
+    pageContainer: {
+        padding: 50,
+        flex: 1,
+        alignItems: 'center',
+        backgroundColor: ColorPalette.blue
+    },
+
+    title: {
+        ..._text
+    },
+
+    callerName: {
+        ..._text,
+        fontSize: 36
+    },
+
+    avatar: {
+        marginVertical: 50
+    },
+
+    buttonContainer: {
+        flex: 1,
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-end'
+    },
+
+    buttonText: {
+        ..._button,
+        ..._text
+    },
+
+    buttonIcon: {
+        ..._button,
+        color: ColorPalette.white,
+        fontSize: 24
+    },
+
+    declineButton: {
+        ..._responseButton,
+        backgroundColor: '#FC4D36'
+    },
+
+    answerButton: {
+        ..._responseButton,
+        backgroundColor: '#36A874',
+        transform: [
+            { rotateZ: '130deg' }
+        ]
     }
 });