geekyants / nativebase-templates Goto Github PK

What is the best way to containerize Solito/Nativebase? It has app files in both apps/next/* as well as packages/app/*

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

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

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.

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 ?

@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:

• clone solito-universal-app-template-nativebase-typescript
• edit 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>
  )
}

• Install with yarn and run with yarn web

Thanks!

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,

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?

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.

• What went wrong:
  Execution failed for task ':react-native-gradle-plugin:compileKotlin'.

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.

• Try:

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.

• Get more help at https://help.gradle.org

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.

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';
^^^^^^
``

expo-nativebase-typescript > App.tsx > Remove imports for Box and Image

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
    },
  },
})

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?

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?

Steps to repoduce:

1. clone the repo
2. cd universal-app-template-nativebase-typescript
3. yarn
4. yarn start:web

❯ 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)

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:

1. run command yarn add module expo-camera in directory ./packages/app.
2. yarn web

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 ?