React-native-maps module, missing gradle files? - react-native

I'm trying to set up react-native-maps module at my react-native app, however the component I've put in the code is blank.
To configure it properly I'm following the instructions (https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md), however at the very first step I've encountered a problem.
The android/settings.gradle file is missing, even the android directory. Should I launch some command to generate these? The remaining screens seem to work.
There are plenty of gradle files in node_modules folder, the one from expo module could be the match, but changing it doesn't seem right.
Where is the settings.gradle file located by default?

Since you tagged expo in your question:
If you are using Expo you don't have to got through the integration steps, as react-native-maps is already included in Expo: https://docs.expo.io/versions/latest/sdk/map-view/
Just import the MapView from Expo:
...
import { MapView } from 'expo';
...
If you are not using Expo the settings.gradle file should look like this:
rootProject.name = '<your appname>'
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
include ':app'

for ''Where is the settings.gradle file located by default?'' android->app and (usually last file is)settings.gradle

Related

How to create react native wrappers for native android and iOS SDKs

I am creating a React Native module as a wrapper for existing Android and iOS libraries. The Android library is a jar file and the iOS library is xcframework file. I put the xcframework file inside the ios folder, and the jar file inside android/libs folder ( I created the libs folder). I first tried the iOS library by adding s.preserve_path, s.xcconfig and s.vendored_framework inside the project level podspec file. I am not sure if I need to do anything for the pod spec file, like running it. So I just went along with the next step by trying to import the library's .h in .m file. I tried both using angle brackets <> and using quotes "". But none worked, because firing "react-native run-is" gave me this error: fatal error: file not found. Any help on how to include the libraries in react native is greatly appreciated.
For creating react native wrapper or node module you need use below library.
https://www.npmjs.com/package/react-native-create-library
https://github.com/brodybits/create-react-native-module
Using this library you can create empty react native module project after that you can bind your native code ARR or framework files into that project.
I was able to fix the error by doing the following two steps:
Change "s.vendored_framework" to "s.vendored_frameworks" in the project level .podspec file. My original one is singular (framework), not plural (frameworks).
cd iOS && pod install && cd ..
Step 2 can be found in create-react-native-module's GitHub link:
https://github.com/brodybits/create-react-native-module
I missed the second step when posting my question. I thought then that if I ran "react-native run-ios", it would run "pod install".

Expo/React Native: Can't find image file after ejecting to bare workflow

I have an Expo project with an <Image /> component sourced from an import:
import logoImage from './assets/logo-medium.png';
...
<Image source={logoImage} />
This works fine on my device when building with expo run:ios -d. However, when I build the project with XCode, the image isn't there, and I see this error:
[native] Could not find image file:///Users/username/Library/Developer/CoreSimulator/Devices/B76D59AF-9599-4174-991B-AE484575B79C/data/Containers/Data/Application/A57C6E10-3DF9-46E0-8B56-7760AF5199C6/Library/Application%20Support/.expo-internal/assets/assets/logo-medium.png
When I try to find that file manually, there is no ...Application Support/.expo-internal directory.
Is there a different way I should be specifying image location? Or a way for the image to be correctly bundled when building from XCode?
I had the same issue, make sure about two things:
One of the potential solutions found on the web -
https://forums.expo.dev/t/assets-missing-only-in-ios-release-build-after-ejecting/42759
Ok I found out the problem.
When ejecting, expo is supposed to generate a metro.config.js file that looks like that:
module.exports = {
transformer: {
assetPlugins: ['expo-asset/tools/hashAssetFiles']
}
};
Your metro.config.js file shuld has .js extensions not .ts

React Native: Invariant Violation when using "React-Native-FS"

I have been trying to use "React-Native-FS" while developing a react native application. However, whenever I try to import "React-Native-FS" to my app I get the following message:
Invariant Violation: Native Module Cannot Be Null
Does anyone have any clue what could be causing this? I've searched around and can't find an answer. Any help would be greatly appreciated. Thanks!
try to do link your library with
react-native link react-native-fs
if its not linked try to do manually linking with below step
ANDROID
... 1. android/settings.gradle
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(settingsDir,'../node_modules/react-native-fs/android')
2.android/app/build.gradle
dependencies {
implementation project(':react-native-fs')
}
ANd do build android project with android studio
IOS
Adding with CocoaPods
Add the RNFS pod to your list of application pods in your Podfile, using the path from the Podfile to the installed module:~~
pod 'RNFS', :path => '../node_modules/react-native-fs'
Install pods as usual:
pod install
Adding Manually in XCode
In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name] Go to node_modules ➜ react-native-fs and add the .xcodeproj file
In XCode, in the project navigator, select your project. Add the lib*.a from the RNFS project to your project's Build Phases ➜ Link Binary With Libraries. Click the .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.
Run your project (Cmd+R)

Why is react-native-svg-icons giving me the error that there are some duplicates for ttf files?

Long story short
I have sunk about 12 hours in my iPhone react-native app. Since yesterday it's not building anymore (out of nowhere). After 5 hours! of debugging I found what may caused the issue but not how to solve it.
I use these packages containing .ttf files / for icons and stuff:
"#fortawesome/fontawesome-svg-core"
"#fortawesome/free-solid-svg-icons"
"#fortawesome/react-native-fontawesome"
"#react-native-community/cli-platform-ios"
"react-native-vector-icons"
And I think there is the problem. Since react-native-vector-icons seems to use also the same .ttf file that one of these packages bring in I get the error:
Multiple Commands produce...
So when I uninstall react-native-vector-icons it works again. But then when I get to the screen where i use this package:
"react-native-elements" (which in the docs it says it needs react-native-vector-icons)
It's complaining that it can't find Fontawesome Icons (the Checkbox Component from elements)
So how can I fix this? I need the app to build obviously and also need the Checkbox Component from react-native-elements. But react-native-elements requires react-native-svg-icons. But when I install it it doesn't even build with the above error that there are multiple .ttf files of the same icon.
I could not figure it out but it has something to do with react-native-elements since they also link the icons that also come with react-native-vector-icons
I solved it by getting rid of react-native-elements and created my own custom Checkbox component.
I had a similar issue associated with the fonts included in the react-native-vector-icons library. I solved it with the following.
I created assets/fonts dir in my project. I added another some fonts that iOS didn't have linked ("Nunito" font in my case), but I didn't include fonts of react-native-vector-icons
I created a new file named react-native.config.js in the root of my project with the following:
module.exports = {
project: {
ios: {},
android: {}
},
assets: ['./src/assets/fonts/'],
};
Then I ran react-native link
Then I went to ios dir (cd ios) and ran pod update
Finally, I ran react-native run-ios and the magic happened
I bassed it on Alex Biddle's post: https://medium.com/better-programming/how-to-add-custom-fonts-to-your-react-native-project-c64305281b9

React Native: There is an exception using react-native-fs

This is an error when using React-native-fs. I am using expo to create my project without detach and tried not to detach as possible. I want to read the content:// image retrieved from getPhotos in CameraRoll from react-native module as a file path. Is it because i have not detach my application. Is there a way to use expo to retrieve the file path of the image.
You should link project
react-native link react-native-fs
or manual linking
android/settings.gradle
...
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
android/app/build.gradle
...
dependencies {
...
compile project(':react-native-fs')
}
add package .addPackage(new RNFSPackage())
then generate new build