geekyants / nativebase-templates Goto Github PK
View Code? Open in Web Editor NEWNativeBase Templates for different platforms.
NativeBase Templates for different platforms.
Hi there, I am trying to use this template for my monorepo.
followed the instruction on readme and it works on Expo client
when I run the script web or native
however, when I added a new script target on the root package.json
"android": "cd apps/expo && expo android"
and then if I run yarn android
it doesnt compile.
it throws following error
`
Task :react-native-gradle-plugin:compileKotlin FAILED
'compileJava' task (current target is 1.8) and 'compileKotlin' task (current target is 11) jvm target compatibility should be set to the same Java version.
FAILURE: Build failed with an exception.
Failed to query the value of task ':react-native-gradle-plugin:compileKotlin' property 'compilerRunner$kotlin_gradle_plugin'.
Kotlin could not find the required JDK tools in the Java installation. Make sure Kotlin compilation is running on a JDK, not JRE.
Run with --stacktrace option to get the stack trace.
Run with --info or --debug option to get more log output.
Run with --scan to get full insights.
BUILD FAILED in 10s
1 actionable task: 1 executed
Error: /Users/hiteshkhatri/Documents/personal/projects/my-solito-app-2/apps/expo/android/gradlew exited with non-zero code: 1
Error: /Users/hiteshkhatri/Documents/personal/projects/my-solito-app-2/apps/expo/android/gradlew exited with non-zero code: 1
at ChildProcess.completionListener (/Users/hiteshkhatri/Documents/personal/projects/my-solito-app-2/node_modules/@expo/spawn-async/build/spawnAsync.js:52:23)
at Object.onceWrapper (node:events:628:26)
at ChildProcess.emit (node:events:513:28)
at maybeClose (node:internal/child_process:1100:16)
at Process.ChildProcess._handle.onexit (node:internal/child_process:304:5)`
any ideas, what I am doing wrong?
I can compile the vanilla EXPO project
created with expo cli with android script
without any issues.
just to verify that i have all the required Java and JDK /JRE is installed etc.
@expo/vector-icons
aren't loading properly in web.
They work well in native, but display as a question mark instead of the icon in web:
Steps to reproduce:
packages/app/features/home/screen.tsx
and change to:import { MaterialIcons } from '@expo/vector-icons'
import { Center, Icon } from 'native-base'
import React from 'react'
export function HomeScreen() {
return (
<Center flex={1}>
<Icon size="sm" as={MaterialIcons} name="menu" />
</Center>
)
}
yarn
and run with yarn web
Thanks!
Steps to repoduce:
❯ node --version
v16.13.1
http://localhost:3000/ renders this error
Server Error
SyntaxError: Cannot use import statement outside a module
I have a feeling it's related to webpack
/ react-native-web
config because this is my terminal outputs this:
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
/Users/cerebra/workspace/tmp/nativebase-templates/universal-app-template-nativebase-typescript/node_modules/react-native-web/dist/exports/StyleSheet/createCompileableStyle.js:11
import normalizeValueWithProperty from './normalizeValueWithProperty';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
To reproduce:
expo init my-app --template @native-base/expo-template-typescript
cd my-app
yarn install
expo build:web
python3 -m http.server 2021 --directory web-build. # somehow serve the static content
Loading 'localhost:2021
, you'll get these errors:
Serving HTTP on :: port 2021 (http://[::]:2021/) ...
::1 - - [18/Apr/2022 10:26:46] "GET / HTTP/1.1" 200 -
::1 - - [18/Apr/2022 10:26:46] code 404, message File not found
::1 - - [18/Apr/2022 10:26:46] "GET /GeekyAnts/nativebase-templates/static/js/runtime~app.396591f8.js HTTP/1.1" 404 -
::1 - - [18/Apr/2022 10:26:46] code 404, message File not found
::1 - - [18/Apr/2022 10:26:46] "GET /GeekyAnts/nativebase-templates/static/js/2.15be5df1.chunk.js HTTP/1.1" 404 -
::1 - - [18/Apr/2022 10:26:46] code 404, message File not found
::1 - - [18/Apr/2022 10:26:46] "GET /GeekyAnts/nativebase-templates/static/js/app.900ee758.chunk.js HTTP/1.1" 404 -
::1 - - [18/Apr/2022 10:26:46] code 404, message File not found
::1 - - [18/Apr/2022 10:26:46] "GET /GeekyAnts/nativebase-templates/manifest.json HTTP/1.1" 404 -
::1 - - [18/Apr/2022 10:26:46] code 404, message File not found
::1 - - [18/Apr/2022 10:26:46] "GET /GeekyAnts/nativebase-templates/favicon.ico HTTP/1.1" 404 -
::1 - - [18/Apr/2022 10:26:46] code 404, message File not found
::1 - - [18/Apr/2022 10:26:46] "GET /GeekyAnts/nativebase-templates/favicon-32.png HTTP/1.1" 404 -
::1 - - [18/Apr/2022 10:26:46] code 404, message File not found
::1 - - [18/Apr/2022 10:26:46] "GET /GeekyAnts/nativebase-templates/favicon-16.png HTTP/1.1" 404 -
If you move the above 404 files from the web-build
directory to web-build/GeekyAnts/nativebase-templates/
, it will work properly. How do I get rid of the unnecessary /GeekyAnts/nativebase-templates/
in the links in index.html
?
Is it possible to request for an example jest test to be added to the expo, ts template ?
Currently I'm using "@expo-google-fonts" for expo and I'm just adding link tags in the _document file for next. But there's no way to sync both up with native base. when extending the theme the font faces are different for each platform. Is there a way that I can use @expo-google-fonts in the next app?
Good day,
We tried creating a project with npx react-native init MyApp --template @native-base/react-native-template
according to the instructions here. However, the RN version it comes with is outdated and we were not able to run it.
We had to create a blank RN project using npx react-native init MyApp
and then adding nativebase manually.
Is it possible to update the template to use latest RN and other dependencies versions to ease the development process?
Thank you,
I did a clone from solito-universal-app-template-nativebase-typescript and I tried to install a module "expo-camera"
then I got that error message
Steps to reproduce:
yarn add module expo-camera in directory ./packages/app.
Message
Sample code
import { Link as SolitoLink } from 'solito/link'
import React from 'react'
import {
Center,
Image,
HStack,
Text,
Heading,
Code,
Link,
VStack,
Button,
AspectRatio,
Box,
} from 'native-base'
import { ColorModeSwitch } from '../../components'
import { Camera } from 'expo-camera';
export function HomeScreen() {
return (
<Box
flex={1}
_dark={{ bg: 'blueGray.900' }}
_light={{ bg: 'blueGray.50' }}
>
<Camera
style={{
height:"500px",
width:"500px"
}}/>
</Box>
)
}
Package.json in package/app
{
"version": "0.0.0",
"name": "app",
"main": "index.ts",
"dependencies": {
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.5.0",
"expo-barcode-scanner": "^11.4.0",
"expo-camera": "^12.3.0",
"expo-linking": "^3.0.0",
"native-base": "3.3.7",
"react-native-svg": "^12.3.0",
"react-native-web": "0.17.7",
"solito": "0.0.22"
},
"sideEffects": false
}
Am i missing something in configuration ?
Hi there.
I am trying to use universal-app-template-nativebase-typescript and got this error while running yarn start:web. Check the code below.
Please advise!
Thank you.
``
yarn start:web
yarn run v1.22.17
$ yarn --cwd apps/web run dev
$ next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - automatically enabled Fast Refresh for 1 custom loader
info - Using external babel configuration from /dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
info - Using external babel configuration from /Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
info - Using external babel configuration from /Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
info - Using external babel configuration from /Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
info - Using external babel configuration from /Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
info - Using external babel configuration from /Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
info - Using external babel configuration from /Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
info - Using external babel configuration from /Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
info - Using external babel configuration from /Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
info - Using external babel configuration from /Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
info - Using external babel configuration from /Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
info - Using external babel configuration from /Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/babel.config.js
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
/Users/dev/action/test/@native-base-free-starter/monorepo-template/node_modules/react-native-web/dist/exports/StyleSheet/createCompileableStyle.js:11
import normalizeValueWithProperty from './normalizeValueWithProperty';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1032:15)
at Module._compile (node:internal/modules/cjs/loader:1067:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.react-native-web/dist/exports/StyleSheet/createCompileableStyle (/Usersdev/action/test/@native-base-free-starter/monorepo-template/apps/web/.next/server/pages/_app.js:7712:18)
at webpack_require (/Users/dev/action/test/@native-base-free-starter/monorepo-template/apps/web/.next/server/webpack-runtime.js:33:42)
info - automatically enabled Fast Refresh for 1 custom loader
/Users/dev/action/test/@native-base-free-starter/monorepo-template/node_modules/react-native-web/dist/exports/StyleSheet/createCompileableStyle.js:11
import normalizeValueWithProperty from './normalizeValueWithProperty';
^^^^^^
``
Cloned the "Solito universal app typescript" repo and installed, and I haven't changed anything in code yet - when I click on "open user detail" in iOS, the below error is thrown. When running the web app, the link navigates to the user detail page as expected.
I'm new to Solito and haven't yet gone through how the react navigation is setup, though it looks correct at a glance - but am I missing something with the setup here?
from this post: https://stackoverflow.com/questions/69653718/fontfamily-courier-is-not-a-system-font-native-base-expo
it seems like we need to use Courier New for ios 15. could you fix this please
Is there a way to get images showing up in Next?
I am trying to use this configuration, after yarn add next-images in my next folder, but it isn't working:
/** @type {import('next').NextConfig} */
const { withNativebase } = require('@native-base/next-adapter')
module.exports = withNativebase({
dependencies: [
'@expo/next-adapter',
'next-images',
'react-native-vector-icons',
'react-native-vector-icons-for-web',
'solito',
'app',
],
nextConfig: {
projectRoot: __dirname,
reactStrictMode: true,
webpack5: true,
webpack: (config, options) => {
config.resolve.alias = {
...(config.resolve.alias || {}),
'react-native$': 'react-native-web',
'@expo/vector-icons': 'react-native-vector-icons',
}
config.resolve.extensions = [
'.web.js',
'.web.ts',
'.web.tsx',
...config.resolve.extensions,
]
return config
},
},
})
Link to repo : https://github.com/ianchikwature/solito-universal-app-template-nativebase-typescript.git
I am encountering a weird issue on web (desktop) after adding the free screens from the nativebase startup plus package.
When I click a button that navigates to the url housing the component, the component renders with no issue.
However when I navigate to that url directly, this is what happens:
This only happens on desktop breakpoint, in mobile and native, the issue doesn't exist.
Has anyone encountered this before ?
When creating a new project with expo-nativebase-typescript template and running in production mode the app gets stuck on a blank screen. Seen in both web running with expo-cli and when building an android APK.
Please bump react native to 0.69
https://github.com/GeekyAnts/nativebase-templates/blob/master/nextjs-with-native-base-typescript/package.json#L17
Getting security alert for transitive dependency hermes-engine
Vulnerability Found:
Severity: CRITICAL
Modules: @native-base/nextjs-template-typescript>react-native>hermes-engine
URL: https://github.com/advisories/GHSA-7mhc-prgv-r3q4
What is the best way to containerize Solito/Nativebase? It has app files in both apps/next/* as well as packages/app/*
expo-nativebase-typescript > App.tsx > Remove imports for Box and Image
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.