App.tsx

import React from 'react';
import {
  Button,
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import SampleTurboModule from './specs/NativeSampleModule';

function App(): React.JSX.Element {
  const [value, setValue] = React.useState('');
  const [reversedValue, setReversedValue] = React.useState('');

  const onPress = () => {
    const revString = SampleTurboModule.reverseString(value);
    setReversedValue(revString);
  };

  return (
      <SafeAreaView style={styles.container}>
        <View>
          <Text style={styles.title}>
            Welcome to C++ Turbo Native Module Example
          </Text>
          <Text>Write down here he text you want to revert</Text>
          <TextInput
              style={styles.textInput}
              placeholder="Write your text here"
              onChangeText={setValue}
              value={value}
          />
          <Button title="Reverse" onPress={onPress} />
          <Text>Reversed text: {reversedValue}</Text>
        </View>
      </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 18,
    marginBottom: 20,
  },
  textInput: {
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 5,
    padding: 10,
    marginTop: 10,
  },
});

export default App;