Issue with @10play/tentap-editor on Physical Android Devices

[Nkosinathi Mbokazi]

I am encountering an issue with the "@10play/tentap-editor" package when running my React Native application on physical Android device. Despite functioning correctly on Android emulators, the text editor component fails to display on physical Android phone.

Upon investigation, I discovered that certain aspects of my code appear to be functioning only on Android emulator, However, before making any changes to my code, I wanted to reach out and inquire if there's something iam missing of the "@10play/tentap-editor" package im not aware of.. of any known issues or compatibility limitations specific to Android devices.

I have thoroughly tested the application on multiple physical Android devices to ensure that the issue is not device-specific. Despite these efforts, the problem persists across different models of Android phones.

Below is the relevant section of my code for reference:

import { SafeAreaView, KeyboardAvoidingView, Platform, TouchableOpacity, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { useNavigation } from '@react-navigation/native';
import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor';

const AddToDoScreen = ({ route }) => {
  const [text, setText] = useState('');
  const { todo } = route.params || {};
  const navigation = useNavigation();

  // Initialize the 10tap editor
  const editor = useEditorBridge({
    autofocus: true,
    avoidIosKeyboard: true,
    initialContent: todo ? todo.text : '',
  });

  //console.log('Editor initialized:', editor);

 
 
  useEffect(() => {
    if (todo) {
      // Set initial content of the editor to the text of the todo
      console.log("Todo Text:", todo.text);
      editor.setContent(todo.text);
    }
  }, [todo]);

  const addTodo = () => {
    editor.getText().then((content) => {
      if (content.trim() !== '') {
        if (todo) {
          const updatedTodo = { ...todo, text: content };
          navigation.navigate('TodoScreen', { newTodo: updatedTodo });
        } else {
          const newTodo = { id: Date.now().toString(), text: content, createdAt: new Date().toISOString() };
          navigation.navigate('TodoScreen', { newTodo}); 
        }
        setText('');
      }
    });
  };

  return (
    <SafeAreaView style={styles.fullScreen}>
      <RichText editor={editor} />
      <KeyboardAvoidingView
        behavior={Platform.OS === 'android' ? 'padding' : 'height'}
        style={styles.keyboardAvoidingView}
      >
      <Toolbar editor={editor} />
      </KeyboardAvoidingView>
      <TouchableOpacity style={styles.addButton} onPress={addTodo}>
          <Icon name="plus" size={20} color="white" />
        </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  fullScreen: {
    flex: 1,
  },
  keyboardAvoidingView: {
    position: 'absolute',
    width: '100%',
    bottom: 0,
  },
  addButton: {
    position: 'absolute',
    bottom: 20,
    right: 20,
    backgroundColor: 'blue',
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default AddToDoScreen; ```

[Nkosinathi Mbokazi]

my package.json looks like this :

"dependencies": { "@10play/tentap-editor": "^0.4.58", "@expo/config-plugins": "^8.0.4", "@expo/metro-runtime": "^3.2.1", "@react-native-async-storage/async-storage": "^1.23.1", "@react-navigation/native": "^6.1.17", "@react-navigation/stack": "^6.3.29", "expo": "^51.0.9", "expo-doctor": "^1.6.1", "expo-status-bar": "^1.12.1", "react": "18.2.0", "react-dom": "18.2.0", "react-native": "^0.74.1", "react-native-gesture-handler": "^2.16.2", "react-native-safe-area-context": "4.10.1", "react-native-screens": "3.31.1", "react-native-vector-icons": "^10.0.3", "react-native-webview": "13.8.6" }

[Amir Angel]

Hey, we tested running our examples on physical androids, without any issue.
Could you share the error you are seeing? If there is no error in metro, try open chrome devtools and inspect the rich text editor
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md#android--chrome (in our case the rich text component is the webview so add the webviewDebuggingEnabled prop to the RichText