I wanted to have event syntax on my JSX with a native component written in Swift.
// Basically just this:
<MyComponent onChange={changes => console.log(changes)} />
No matter where I looked, no place seemed to have clear documentation on how to do all of this in one clear, concise place. After reading over StackOverflow posts and some Gists and some blog posts and putting it all together, this is what I got working. Please see the GitHub link below for a link to this repo that also has a working Android implementation.
This is the file structure of the Native Module (created via create-react-native-module
):
├── README.md
├── android
│ └── ...later
| // This file is where everything from the native modules ties in to the final exported React Native component
├── index.js
├── ios
| // These files are modified and added via XCode. Be sure they're part of the project "Target Membership"!
│ ├── RTEEventEmitter.m
│ ├── RTEEventEmitter.swift
│ ├── RichTextEditor-Bridging-Header.h
│ ├── RichTextEditor.m
│ ├── RichTextEditorManager.swift
│ ├── RichTextEditor.xcworkspace
│ └── RichTextEditor.xcodeproj
├── package.json
├── react-native-rich-text-editor.podspec
└── yarn.lock
This module is then installed in a React Native app, and pulled into the file, as shown in App.js
at the end. Thanks to eschos24 for his help with all of this!
Additional reading:
This post helped me understand the evens a little better
The official docs had some ObjC that we translated and it helped get events set up
My GitHub repo that has all of these files in their most recent iteration.
May many good things happen to you. This gist finally got my code working!