foi inserido novos features de copiar e ajustes de layout

react-native-webrtc-app/client/App.js

@@ -27,9 +27,9 @@ import CameraSwitch from './asset/CameraSwitch';
 import VivaVozIcon from './asset/VivaVoz';
 import IconContainer from './components/IconContainer';
 import InCallManager from 'react-native-incall-manager';
-import ConfigScreen from './asset/pages/ConfigScreen';
+import ConfigScreen from './asset/pages/ConfigScreen/ConfigScreen';
 import * as JsSIP from 'react-native-jssip';
-import JoinScreen from './asset/pages/JoinScreen';
+import JoinScreen from './asset/pages/JoinScreen/JoinScreen';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 
@@ -411,89 +411,6 @@ export default function App({}) {
     );
   };
 
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      justifyContent: 'center',
-      padding: 30,
-      backgroundColor: '#333',
-    },
-    configuration: {
-      display: 'flex',
-      flexDirection: 'column',
-      flex: 1,
-      justifyContent: 'space-around',
-      alignContent: 'center',
-      backgroundColor: 'rgba(17, 24, 39, 1)',
-    },
-    configInputs: {
-      backgroundColor: 'transparent',
-    },
-    input: {
-      backgroundColor: '#f5f5f559',
-      margin: 6,
-      fontSize: 18,
-      color: 'white',
-      padding: 10,
-      borderRadius: 8,
-    },
-    buttonSend: {
-      width: '75%',
-      alignSelf: 'center',
-      backgroundColor: 'white',
-      height: 45,
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: 4,
-    },
-    logo: {
-      width: '100%',
-      height: 80,
-      justifyContent: 'center',
-      top: 0,
-      padding: 20,
-    },
-    subtitle: {
-      fontSize: 13,
-      color: '#EAEAEA',
-      textAlign: 'center',
-      marginBottom: 40,
-    },
-    inner: {
-      padding: 35,
-      backgroundColor: 'rgba(26, 28, 34, 0.7)',
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: 15,
-      marginTop: 12,
-    },
-    titles: {
-      fontSize: 16,
-      color: '#EAEAEA',
-    },
-    idCall: {
-      fontSize: 34,
-      color: '#FFF',
-      letterSpacing: 6,
-    },
-    box: {
-      marginTop: 12,
-      alignItems: 'center',
-    },
-    buttonCall: {
-      borderRadius: 6,
-      padding: 4,
-      backgroundColor: 'green',
-      width: '80%',
-      margin: 10,
-      height: 40,
-      textAlign: 'middle',
-      flexDirection: 'row',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-  });
-
   const OutgoingCallScreen = () => {
     return (
       <View
@@ -761,7 +678,6 @@ export default function App({}) {
         <Stack.Screen name="home" options={{headerShown: false}}>
           {() => (
             <JoinScreen
-              styles={styles}
               setCalle={setCalle}
               calle={calle}
               handleIniciarChamada={handleIniciarChamada}
@@ -772,7 +688,6 @@ export default function App({}) {
         <Stack.Screen name="configuracoes" options={{headerShown: false}}>
           {() => (
             <ConfigScreen
-              styles={styles}
               authData={authData}
               handleInputChange={handleInputChange}
               handleSubmit={handleSubmit}

react-native-webrtc-app/client/android/app/build.gradle

@@ -79,7 +79,7 @@ import org.apache.tools.ant.taskdefs.condition.Os
  */
 
 project.ext.react = [
-    enableHermes: false,  // clean and rebuild if changing
+    enableHermes: true,  // clean and rebuild if changing
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"

react-native-webrtc-app/client/android/app/src/main/java/com/webrtcexample/MainApplication.java

@@ -25,7 +25,6 @@ public class MainApplication extends Application implements ReactApplication {
         new MainReactPackage(),
         new VectorIconsPackage(),
         new InCallManagerPackage()
-
     );
   }
 

react-native-webrtc-app/client/asset/Logo.js

@@ -1,11 +1,15 @@
-import { View, Text, Image } from 'react-native';
+import {View, Text, Image} from 'react-native';
 
-function Logo({ estilo }) {
-    return (
-      <View>
-        {/* Aplicando o estilo ao componente Image */}
-        <Image resizeMode='contain' style={estilo.logo} source={require('./src/simplesip.png')} />
-      </View>
-    );
-  }
-export default Logo;
+function Logo() {
+  return (
+    <View>
+      {/* Aplicando o estilo ao componente Image */}
+      <Image
+        resizeMode="center"
+        style={{paddingHorizontal: 10, width: 280, height: 80}}
+        source={require('./src/simplesip.png')}
+      />
+    </View>
+  );
+}
+export default Logo;

react-native-webrtc-app/client/asset/pages/ConfigScreen/ConfigScreen.js

@@ -3,8 +3,9 @@ import React from 'react';
 import {View, Text, TouchableOpacity} from 'react-native';
 import {TextInput, Button, Appbar} from 'react-native-paper'; // Importe os componentes necessários do PaperCut
 import {SafeAreaProvider} from 'react-native-safe-area-context';
+import styles from './styles';
 
-const ConfigScreen = ({styles, authData, handleInputChange, handleSubmit}) => {
+const ConfigScreen = ({authData, handleInputChange, handleSubmit}) => {
   const navigation = useNavigation();
   return (
     <SafeAreaProvider>

react-native-webrtc-app/client/asset/pages/ConfigScreen/styles.js

@@ -0,0 +1,93 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    padding: 16,
+    backgroundColor: '#333',
+  },
+  header: {
+    width: '100%',
+    backgroundColor: '#444',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    padding: 8,
+  },
+  settingsButton: {
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  logoContainer: {
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  logo: {
+    width: '100%',
+    height: 80,
+    justifyContent: 'center',
+    padding: 20,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#EAEAEA',
+    textAlign: 'center',
+    marginTop: 8,
+  },
+  inner: {
+    marginVertical: 16,
+    padding: 35,
+    backgroundColor: 'rgba(26, 28, 34, 0.7)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 15,
+    marginTop: 12,
+  },
+  titles: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    color: '#EAEAEA',
+  },
+  box: {
+    backgroundColor: '#FFF',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  idCall: {
+    fontSize: 34,
+    fontWeight: 'bold',
+    color: '#FFF',
+    letterSpacing: 6,
+  },
+  textInput: {
+    backgroundColor: '#f5f5f559',
+    margin: 6,
+    fontSize: 18,
+    color: 'white',
+    padding: 10,
+    borderRadius: 8,
+    borderColor: '#DDD',
+    borderWidth: 1,
+    width: '100%',
+  },
+  buttonCall: {
+    backgroundColor: 'green',
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+    width: '80%',
+    marginTop: 16,
+  },
+  buttonText: {
+    color: '#FFF',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+
+export default styles;

react-native-webrtc-app/client/asset/pages/JoinScreen.js

@@ -1,70 +0,0 @@
-import {
-  Keyboard,
-  KeyboardAvoidingView,
-  View,
-  Text,
-  TouchableWithoutFeedback,
-  TouchableOpacity,
-} from 'react-native';
-import React from 'react';
-import Logo from '../Logo';
-import TextInputContainer from '../../components/TextInputContainer';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
-import {IconButton, MD2Colors} from 'react-native-paper';
-import {useNavigation} from '@react-navigation/native';
-
-const JoinScreen = ({
-  styles,
-  setCalle,
-  calle,
-  handleIniciarChamada,
-  myRamal,
-}) => {
-  const navigation = useNavigation();
-  return (
-    <SafeAreaProvider>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.container}>
-        <IconButton
-          icon={'account-cog'}
-          iconColor={MD2Colors.tealA100}
-          size={30}
-          onPress={() => navigation.navigate('configuracoes')}
-        />
-        <Logo estilo={styles} />
-        <Text style={styles.subtitle}>O softphone da Simples IP</Text>
-        <View style={styles.inner}>
-          <Text style={styles.titles}>Seu ID para ligação</Text>
-          <View style={styles.box}>
-            <Text style={styles.idCall}>{myRamal}</Text>
-          </View>
-        </View>
-        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-          <>
-            <View style={styles.inner}>
-              <Text style={styles.titles}>Ligação</Text>
-              <TextInputContainer
-                placeholder={'Insira o ID para ligação'}
-                value={calle}
-                setValue={text => {
-                  setCalle(text);
-                }}
-                keyboardType={'number-pad'}
-              />
-              <TouchableOpacity
-                onPress={() => {
-                  handleIniciarChamada();
-                }}
-                style={styles.buttonCall}>
-                <Text style={styles.titles}>Realizar chamada</Text>
-              </TouchableOpacity>
-            </View>
-          </>
-        </TouchableWithoutFeedback>
-      </KeyboardAvoidingView>
-    </SafeAreaProvider>
-  );
-};
-
-export default JoinScreen;

react-native-webrtc-app/client/asset/pages/JoinScreen/JoinScreen.js

@@ -0,0 +1,73 @@
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  View,
+  Text,
+  TouchableWithoutFeedback,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
+import React from 'react';
+import Logo from '../../Logo';
+import TextInputContainer from '../../../components/TextInputContainer';
+import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
+import {IconButton, MD2Colors} from 'react-native-paper';
+import {useNavigation} from '@react-navigation/native';
+import styles from './styles';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+const handleCopyToClipboard = (text) => {
+  Clipboard.setString(text);
+  Alert.alert('Ramal copiado para área de transferência!');
+}
+
+const JoinScreen = ({setCalle, calle, handleIniciarChamada, myRamal}) => {
+  const navigation = useNavigation();
+  return (
+    <SafeAreaProvider>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.container}>
+        <SafeAreaView style={styles.header}>
+          <IconButton
+            style={styles.settingsButton}
+            icon={'account-cog'}
+            iconColor={MD2Colors.grey300}
+            size={25}
+            onPress={() => navigation.navigate('configuracoes')}
+          />
+        </SafeAreaView>
+        <View style={styles.logoContainer}>
+          <Text style={styles.subtitle}>Softphone</Text>
+          <Logo />
+        </View>
+        <View style={styles.inner}>
+          <Text style={styles.titles}>Ramal do agente</Text>
+          <TouchableOpacity onPress={() => handleCopyToClipboard(myRamal)}>
+            <View style={styles.box}>
+              <Text style={styles.idCall}>{myRamal}</Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <View style={styles.inner}>
+            <TextInputContainer
+              placeholder={'Insira o ramal para ligação'}
+              value={calle}
+              setValue={setCalle}
+              keyboardType={'number-pad'}
+              style={styles.textInput}
+            />
+            <TouchableOpacity
+              onPress={handleIniciarChamada}
+              style={styles.buttonCall}>
+              <Text style={styles.buttonText}>Realizar chamada</Text>
+            </TouchableOpacity>
+          </View>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
+    </SafeAreaProvider>
+  );
+};
+
+export default JoinScreen;

react-native-webrtc-app/client/asset/pages/JoinScreen/styles.js

@@ -0,0 +1,85 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 16,
+    backgroundColor: 'rgba(17, 24, 39, 1)',
+  },
+  header: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    position: 'relative',
+    top: 0,
+  },
+  settingsButton: {
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  logoContainer: {
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  subtitle: {
+    fontSize: 18,
+    textAlign: 'center',
+    alignSelf: 'flex-start',
+    marginTop: 2,
+    marginLeft: 24,
+    fontWeight: 'bold',
+  },
+  inner: {
+    marginVertical: 16,
+    padding: 10,
+    backgroundColor: 'rgba(26, 28, 34, 0.7)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 15,
+    marginTop: 12,
+  },
+  titles: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginBottom: 6,
+  },
+  box: {
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  idCall: {
+    fontSize: 34,
+    fontWeight: 'bold',
+    color: '#FFF',
+    letterSpacing: 6,
+  },
+  textInput: {
+    backgroundColor: '#f5f5f559',
+    margin: 6,
+    fontSize: 18,
+    color: 'white',
+    padding: 10,
+    borderRadius: 8,
+    borderColor: '#DDD',
+    borderWidth: 1,
+    width: '100%',
+  },
+  buttonCall: {
+    backgroundColor: 'green',
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+    width: '80%',
+    marginTop: 16,
+  },
+  buttonText: {
+    color: '#FFF',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+
+export default styles;

react-native-webrtc-app/client/index.js

@@ -4,10 +4,18 @@
 import 'react-native-gesture-handler';
 import {AppRegistry} from 'react-native';
 import App from './App';
-
 import {name as appName} from './app.json';
 import {registerGlobals} from 'react-native-webrtc';
+import {PaperProvider} from 'react-native-paper';
 
 registerGlobals();
 
-AppRegistry.registerComponent(appName, () => App);
+export default function Main() {
+  return (
+    <PaperProvider>
+      <App />
+    </PaperProvider>
+  );
+}
+
+AppRegistry.registerComponent(appName, () => Main);

react-native-webrtc-app/client/package.json

@@ -10,7 +10,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@react-native-masked-view/masked-view": "^0.3.1",
+    "@react-native-clipboard/clipboard": "^1.14.1",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.3.29",
     "big-integer": "^1.6.52",