🧍♂️ React Native + Next.js, unified.
Home Page: https://solito.dev
License: MIT License
A library dedicated to unifying React Native with Next.js, primarily focused on navigation.
yarn add solitoSolito is a replacement for my popular expo-next-react-navigation library. Consider this the next-generation version, with a brand new API and approach.
Watch Fernando Rojo's talk from Next.js Conf 2021 to learn more about using React Native with Next.js.
yarn global add gitmoji-cli or npm i -g gitmoji-cliyarn
New to this, got a Expo web app and want to do static / server side rendering and experimenting.
has anyone seen the following approach? It seems to work ok in a mini-test app but I'm not certain if anyone else tried it before.
When using the useParam hook to retrieve URL params during the application's first render, the value returned by the hook is undefined
for instance, given we insert the URL:
http://localhost:3000/example-route?query=test+my+friend
the following snippet
const Example = () => {
const [query, setQuery] = useParam("query");
useEffect(() => {
console.log({query});
}, []);
return (<View><Text>test component</Text></View>)
}the consoled value will be:
Next.js SSG can not export static HTML correctly in Solito Example Monorepo.
$ npx create-solito-app@latest my-solito-app$ next build && next export$cat out/index.htmlexpected
<body>
<div id="__next">
<div style="flex: 1">
<div>some HTML...</div>
</div>
</div>
...
but I got below.
<body>
<div id="__next" data-reactroot=""></div>
<script id="__NEXT_DATA__" type="application/json">
...
currently, the behavior on iOS/Android is to start with the screen parameter, and then use react state after that. this doesn't make much sense. we should use react navigation params the whole time, by using setParams under the hood.
Actually I'm writing this issue, because I want to understand the mental model you were talking about here: #3 (comment)
I do understand that NextJS and React Navigation have their differences when you want to get params. React Navigation uses its own API useRoute and NextJS uses getStaticProps and etc.
Been that said I'll describe my understanding so for, using solito:
// expo/router/user-route.tsx
import UserScreen from 'screens/HomeScreen';
import { useRoute } from '@react-navigation/core';
const UserRoute: React.FC = () => {
const [user, setUser] = useState(null);
const { params: { userId } } = useRoute();
useEffect(()=>{
if (!userId) return;
const userLoaded = await loadUserFromId(userId)
setUser(userLoaded);
}, [userId])
if (!user) return null; // or loading
return <UserScreen user={user} />
}
export default UserRoute;// next/pages/user/[userId].tsx
import UserScreen from 'screens/HomeScreen';
const UserPage: React.FC<{user: IUser}> = ({ user }) => {
if (!user) return null;
return <UserScreen user={user} />
}
export default UserPage;
export const getStaticProps = async ({params}) => {
const userLoaded = await loadUserFromId(params.userId)
return {
props: { user: userLoaded }
}
}Are my thoughts correct? Or there is another way to retrieve these data?
If it's correct, I'd say it should go in docs/receipts. I think there are a lot of devs that have those same doubts
I am trying to utilize the new Params functions that were added but they don't seem to be available.
I double checked that my package was on the most recent version on NPM (0.0.22 - which says it was published an hour ago) and tried to delete/reinstall my node_modules - I can see the new Params folder inside the Solito node_modules directory as well. Is this a bug with the package or possibly something wrong on my end?
I am hoping to use Storybook.js to build a component library for a Solito app I am building. Has anyone tried to install Storybook.js into a Solito project with success? The Storybook.js CLI currently does not have Solito as an installation option and I am unsure of whether it is best to manually set up Storybook.js stories in the apps/next, apps/expo or packages/app folders.
Would love to hear your thoughts on creating a Solito preset in the Storybook.js CLI or your experience installing it in an existing Solito app!
I have a Nextjs website, which has a part that I'd like to keep just web (http://xxx.com/blog ) , and other part that I'd like to share with React Native (http://xxx.com/app) .
Is it possible? How can I do it while keeping everything in the same repo? I mean, I don't want the blog side to appear in the app for react native.
Thanks
Is there any way or any idea how to use pure react-native/react-native-web component instead of dripsy?
Is there a release date for this lib yet?
I started using the expo-next-react-navigation and I just found out from a RN radio podcast you area building this one, that is a new version of that package. So I worder if there is a release date from lauching this lib.
How would you advise reading the path for the current route? Before useParams was introduced, I targeted NextJS and React Navigation router events to parse both query params and path. But now monitoring the router events feels like overkill.
Have I overlooked a way to access this information already in Solito? If not, would you be inclined to include it?
Love the project <3
The project's Babel config is invalid: Cannot find module 'react-native-reanimated/plugin' from '/Users/riordan/prog/solito-example2/apps/next'
Error: Cannot find module 'react-native-reanimated/plugin' from '/Users/riordan/prog/solito-example2/apps/next'Easy enough fix but wasn't sure how to go about documenting it so I'm just gonna make an issue.
I'm also not 100% positive its not some configuration issue on my end. I tried to find other ways to fix it and came up short though.
The FIX:
I ran yarn set version classic and created this .yarnrc.yml
[project-root]/.yarnrc.yml
nmMode: classic
nmSelfReferences: false
nodeLinker: node-modules
# this is probably different user to user# I think 'yarn set version classic' is supposed to fill this but i had to manually add it
yarnPath: .yarn/releases/yarn-1.23.0-20220130.1630.cjsI try to follow instructions from nextJS docs but it does not found the node_modules from packages/app so I tries to do a local build with minimun steps to copy standalone and public folder into docker and after that run the serve.js but it fails to load dependencies.
Here mi docker file:
FROM node:16-alpine
WORKDIR /app
ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
# You only need to copy next.config.js if you are NOT using the default configuration
COPY next.config.js ./
COPY public ./public
COPY package.json ./package.json
# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY .next/standalone ./
COPY .next/static ./.next/static
USER nextjs
EXPOSE 3000
ENV PORT 3000
CMD ["node", "server.js"]
(Im a Mobile developer so i dont have much experience with web envs)
Hi @nandorojo,
My app is entirely built with Solito and am loving the developer experience so far.
I'm just encountering one roadblock at the moment which is:
Let's say you have a standard bottomtabs navigator with the following tabs:
Most of these these tabs will be reusing the same screens such as <PostScreen /> or <UserScreen /> in the HomeStack, SearchStack, etc...
So let's say you're in the Notifications tab and you navigate to a <PostScreen />, ideally you'd want to stay inside that notifications tab and preserve your state in all the other tabs.
However in react-navigation v6, the app yanks you back to the Home tab, which has the same instance of that <PostScreen/> as part of the HomeStack.
The obvious solution is to make a separate <PostScreen/> and <UserScreen/> for each tab.
But I fear it's going to drastically increase the complexity of the code, and I will end up regretting this.
How would you proceed in such a scenario?
Thanks!
Hey!
I'm getting this error when trying to import twrnc (https://github.com/jaredh159/tailwind-react-native-classnames) in my solito app.
Server Error
SyntaxError: Cannot use import statement outside a module
I've installed both like this
npx create-solito-app@latest my-solito-app
cd packages/app
yarn add twrnc
But then when trying to import it in any of my components
import tw from 'twrnc'
function HelloWorld() {
return (
<View style={tw`bg-blue-100`}>
<Text style={tw.style('text-md')}>Hello</Text>
</View>
)
}
I get the error
SyntaxError: Cannot use import statement outside a module
Any ideas on how to fix this?
Thanks!
As a developer
I can clone and deploy on vercel
So that I can try if it's working
When we hit the deploy button...
...it's impossible to
- Select the folder apps/next as the root of your Next.js app on the Vercel setup.
I have a feeling we can add some params to fix it, but I don't know which one 😅
solito/example-monorepos/blank/readme.md
Line 11 in e2f41ee
I'm using dripsy following this guide to load fonts using useFonts.
https://snack.expo.dev/@nandorojo/dripsy-custom-fonts
It works on React Native, but not in web
I'm getting this error:
wait - compiling...
error - ../../packages/app/provider/assets/fonts/Inter/Inter-Bold.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
I understand NextJs is not loading the fonts.
I've used this next-fonts package , but I cannot make it work.
https://docs.expo.dev/guides/using-nextjs/#font-support
module.exports = withPlugins(
[withTM, [withExpo, [withFonts(), { projectRoot: __dirname }]]],
nextConfig
)
Is this the way to share fonts between React Native and NextJs? For images, is it the same process with next- images. thx!
When using MotiLink in a list, it doesn't always navigate.
We have a MotiLink like this:
<MotiLink href={`/product-detail/${product.id}`}
animate={React.useMemo(
() =>
({ hovered, pressed }) => {
"worklet";
return {
backgroundColor: hovered || pressed ? "#EDEDED" : "#fff",
};
},
[]
)}>{children}</MotiLink>
We use them in a list and whenever we press on an item we should expect to go to another page. Sometimes it works and we navigate to another page but a lot of times i only see the hover effect and it doesn't navigate.
How are you supposed to upgrade the monorepo?
Running expo upgrade in apps/expo just breaks yarn.
Is there a way to upgrade the dependencies smoothly in the future or will it have to be manually done every time?
So far I am really enjoying working with Solito. Upgrading the repo in the future is the only real concern I have.
When setting up the blank project via vercel I got a project without a .gitignore it would be cool to have one ready to go.
Happy to help add it if you're interested in it :)
I'm guessing that just copying the one from the root of this repo would work
the onPress event is undefined on native
hi @nandorojo I was trying out your solito starter, and it's really cool. Found an ugly issue though. The reference to "app" in the next/package.json is being understood by yarn as a reference to this "app". https://www.npmjs.com/package/app What you're really intending to do is reference the local package "packages/app". So it's actually installing that other library inside the node_modules of the "next" app.
Monorepos are super weird, many people use them and miss tiny details like this. I'm trying to avoid them now, they're so hard to control 100%.
How did I discover this? I was examining the peerDependencies of various packages, for example, run npm view @expo/next-adapter@"^3" peerDependencies and I saw it actually depends on next v11. I also need next 11 for compatibility with AWS Amplify. So I downgraded to next@"^11", and the next app stopped working. The error message I got is.
error - ../../packages/app/provider/index.tsx
Module parse failed: Unexpected token (4:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { NavigationProvider } from './navigation'
|
> export function Provider({ children }: { children: React.ReactNode }) {
| return (
| <NavigationProvider>
So that basically is saying that the app module isn't getting transpiled. So I then checked next.config.js, and it IS listed there under "next-transpile-modules". However, I think that reference is for the "app" in the next/node_modules, which is the one from npm, not the local "packages/app". I think for this to work correctly you need to either install the local "app" into the "next/node_modules", or make that code be transpiled by default, making it part of the next source.
The other unknown is why this issue doesn't happen in next@12? Who knows. Monorepos are mysterious.
Hello,
I've tried to use deploy the starter monorepo but I'm getting this error on compile:
I also tried to manually create a solito app locally, and I'm getting the same kind of error:
Do you have any ideas as to what might be the issue?
Hello.
I was following this page https://github.com/nandorojo/solito/tree/master/example-monorepos/blank.
Downloaded example project. Ran it, it works both in web and native. Then tried to add react-query
cd packages/app
yarn add react-query
cd ../..
yarn
Wrapped everything in return() in packages/app/provider/index.tsx with
When starting the project I get the error Error: Cannot find module '../../../node_modules/use-sync-external-store/shim/index.js'
I am not a framework developer so I don't know how most things work under the hood. Maybe I'm trying to use a library (react-query) that isn't supposed to work in solito ? Where can I find which libraries should and which shouldn't work in such project ?
Thanks.
I'd like to use the beta middleware feature: https://nextjs.org/docs/advanced-features/middleware. There seems to be some challenges working with babel in monorepos however: vercel/next.js#35973
Building locally or in Vercel I get the following error. This happens even if the middleware function has nothing but the return statement.
Any ideas on how to configure babel to handle this case?
Hi all,
First of all, I really appreciate the effort the founder of Solito and the community is doing for creating a future-proof React Native + Next JS stack.
The problem I'm having is I don't know how to add a new screen or edit an existing screen correctly. What exactly solito/link component look for in the file name, URL, or in the navigator to create React Navigation's version of that route? Working with Next JS is easy, as the routes are defined on the Next JS project.
I tried to change the name of user/detail-screen.tsx to user/screen.tsx, like home/screen.tsx in the mono repo, but Solito still looks for user-detail. I looked for URL and React Navigation's setup, but there is no user-detail anywhere. I don't know where Solito pulls out the name. The folder structure is also a bit confusing to me as I don't know what is allowed and what isn't.
I tried to look out for documentation and it doesn't seem to have a section like "Create a new Route" or a simple tutorial to make something (a simple to-do list for example) out of Solito.
Here's the code:
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { HomeScreen } from '../../features/home/screen'
import { UserDetailScreen } from '../../features/user/screen'
const Stack = createNativeStackNavigator<{
home: undefined
user: {
id: string
}
}>()
export function NativeNavigation() {
return (
<Stack.Navigator>
<Stack.Screen
name="home"
component={HomeScreen}
options={{
title: 'Home',
}}
/>
<Stack.Screen
name="user"
component={UserDetailScreen}
options={{
title: 'User',
}}
/>
</Stack.Navigator>
)
}import { View, Text } from 'dripsy'
import { createParam } from 'solito'
import { TextLink } from 'solito/link'
const { useParam } = createParam<{ id: string }>()
export function UserDetailScreen() {
const [id] = useParam('id')
return (
<View sx={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text
sx={{ textAlign: 'center', mb: 16, fontWeight: 'bold' }}
>{`User ID: ${id}`}</Text>
<TextLink href="/">👈 Go Home</TextLink>
</View>
)
}import { Text, useSx, View, H1, P, Row, A } from 'dripsy'
import { TextLink } from 'solito/link'
import { MotiLink } from 'solito/moti'
export function HomeScreen() {
const sx = useSx()
return (
<View
sx={{ flex: 1, justifyContent: 'center', alignItems: 'center', p: 16 }}
>
<H1 sx={{ fontWeight: '800' }}>Welcome to Solito.</H1>
<View sx={{ maxWidth: 600 }}>
<P sx={{ textAlign: 'center' }}>
Here is a basic starter to show you how you can navigate from one
screen to another. This screen uses the same code on Next.js and React
Native.
</P>
<P sx={{ textAlign: 'center' }}>
Solito is made by{' '}
<A
href="https://twitter.com/fernandotherojo"
// @ts-expect-error react-native-web only types
hrefAttrs={{
target: '_blank',
rel: 'noreferrer',
}}
sx={{ color: 'blue' }}
>
Fernando Rojo
</A>
.
</P>
</View>
<View sx={{ height: 32 }} />
<Row>
<TextLink
href="/user/fernando"
textProps={{
style: sx({ fontSize: 16, fontWeight: 'bold', color: 'blue' }),
}}
>
Regular Link
</TextLink>
<View sx={{ width: 32 }} />
<MotiLink
href="/user/fernando"
animate={({ hovered, pressed }) => {
'worklet'
return {
scale: pressed ? 0.95 : hovered ? 1.1 : 1,
rotateZ: pressed ? '0deg' : hovered ? '-3deg' : '0deg',
}
}}
transition={{
type: 'timing',
duration: 150,
}}
>
<Text
selectable={false}
sx={{ fontSize: 16, color: 'black', fontWeight: 'bold' }}
>
Moti Link
</Text>
</MotiLink>
</Row>
</View>
)
}I'd really appreciate it if there is some resource for beginners to make a simple project using Solito, the only resource I found is getting started with Solito and NativeBase (https://docs.nativebase.io/solito) but it is also an example mono repo and not exactly a tutorial.
Thanks again for helping me out!
this error is thrown in the apps/expo when I import createParam in packages/app. How do I give packages/app access to my next package in the apps/next node modules?
When directly making use of the examplary "Starter Project" I get a build error.
yarnyarn nativeI tried it on node LTS versions:
Unable to resolve module ./_baseIsEqual from /Users/.../PROJECTFOLDER/node_modules/lodash/isEqual.js:
None of these files exist:
* ../../node_modules/lodash/_baseIsEqual(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
* ../../node_modules/lodash/_baseIsEqual/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
> 1 | var baseIsEqual = require('./_baseIsEqual');
| ^
2 |
3 | /**
4 | * Performs a deep comparison between two values to determine if they are
Would be great if someone could PR the example app to upgrade these. Expo and Next could each have their own PR. Next 12.2 might be less urgent since next transpile modules might not work for it yet (?)
I have a navigation manager component using Solito instantiated between the NavigationContainer and the Navigators.
Using back() from useRouter does not work at this level as navigation is not defined when back runs in use-router.js
The reason for this is the current code uses navigation context as below in the useNavigation hook
import { NavigationContext } from '@react-navigation/core'
import { useContext } from 'react'
export const useNavigation = () => useContext(NavigationContext)
Is there a reason not to change it to be like the code (lifted from their source) in react navigation's useNavigation hook. ie to fall back to using the NavigationContainerRefContext as below?
import { NavigationContext, NavigationContainerRefContext } from '@react-navigation/core';
import { useContext } from 'react';
export const useNavigation = () => {
const root = useContext(NavigationContainerRefContext);
const navigation = useContext(NavigationContext);
if (navigation === undefined && root === undefined) {
throw new Error("Couldn't find a navigation object. Is your component inside NavigationContainer?");
} // FIXME: Figure out a better way to do this
return navigation !== null && navigation !== void 0 ? navigation : root;
}
appreciate any input.
@nandorojo Absolutely loving this library by the way. So handy. Thanks a million for your work
Hello ! I am trying to implement Solito in a Next + React Native monorepo (no Expo)
I built the repo myself since the solito starter was using Expo; everything works seemingly fine.
However, after adding Solito and its config as the website says, I have an error at runtime when starting Next: error - ../../node_modules/@react-navigation/native/lib/module/Link.js:2:0 Module not found: Can't resolve 'react-native'
The file exists and isn't empty.
Import trace:
../../node_modules/@react-navigation/native/lib/module/index.js
../../node_modules/solito/build/router/use-link-to.js
../../node_modules/solito/build/link/core.js
../../node_modules/solito/build/link/index.js
../../node_modules/solito/link/index.js
../shared/homepage.tsx
./pages/index.tsx
Images are not loaded now in Next.js, I did put my images at packages/app/assets. On NextJS it renders an empty view without any image ta
g
I'm about to build my own product using a very similar stack to your Next/Expo one and had a couple questions if you'd be nice enough to answer them:
Thank you again for all your help, transparency, and tools you're developing to make this stack an enjoyable experience!
https://solito.dev/resources#useful-libraries
The dripsy link redirects to https://www.prospectpro.com/. I don't think that's intended.
We started a new Solito project but we can't get eslint to work in the IDE.
Hi,
First, thank you for your work
I am currently testing Solito and I have a Typescript error (ts2322 - capture below) on all Dripsy components of type string
I saw this issue nandorojo/dripsy#67 on your Dripsy repo but it didn't work for me
Would you have any idea?
Thx
I have been able to successfully load custom google fonts into my Solito app so I think I'm close on this. Thanks in advance.
I am following the Expo docs to load a custom icon font via IcoMoon. Loading fine on native / expo but it seems Next is unable to locate the font file. I believe I have my next-fonts config set up correctly, because as I said, normal fonts are loading fine. But I also know that on web, custom fonts are being loaded by the tag in the document head. So not sure how a static asset like local .tff file gets loaded....
Please see below for relative code:
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
webpack5: true
}
const { withExpo } = require('@expo/next-adapter')
const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const withFonts = require('next-fonts')
const withTM = require('next-transpile-modules')([
'solito',
'dripsy',
'@dripsy/core',
'moti',
'@motify/core',
'@motify/components',
'app'
])
module.exports = withPlugins(
[
withTM,
withFonts,
[
withImages,
{
images: {
disableStaticImages: true
}
}
],
[withExpo, { projectRoot: __dirname }]
],
nextConfig
)
useResouces.ts
import * as Font from 'expo-font'
import { useEffect, useState } from 'react'
export const useResources = () => {
const [fontsLoaded, setFontsLoaded] = useState(false)
const [iconsLoaded, setIconsLoaded] = useState(false)
const loadFontAsync = async () => {
try {
await Font.loadAsync({
RobotoSlab: require('../assets/fonts/RobotoSlab-Regular.ttf'),
OpenSans: require('../assets/fonts/OpenSans-Regular.ttf'),
'OpenSans-Bold': require('../assets/fonts/OpenSans-SemiBold.ttf')
})
} catch (error) {
// console.log('Font Load Error:', error)
} finally {
setFontsLoaded(true)
}
}
const loadIconsAsync = async () => {
try {
await Font.loadAsync({
IcoMoonFont: require('../assets/icons/icomoonFont.ttf')
})
} catch (error) {
// console.log('Icon Font Load Error:', error)
} finally {
setIconsLoaded(true)
}
}
useEffect(() => {
loadFontAsync()
loadIconsAsync()
}, [])
return {
fontsLoaded,
iconsLoaded
}
}
dripsy.tsx
import * as Font from 'expo-font'
import { useEffect, useState } from 'react'
export const useResources = () => {
const [fontsLoaded, setFontsLoaded] = useState(false)
const [iconsLoaded, setIconsLoaded] = useState(false)
const loadFontAsync = async () => {
try {
await Font.loadAsync({
RobotoSlab: require('../assets/fonts/RobotoSlab-Regular.ttf'),
OpenSans: require('../assets/fonts/OpenSans-Regular.ttf'),
'OpenSans-Bold': require('../assets/fonts/OpenSans-SemiBold.ttf')
})
} catch (error) {
// console.log('Font Load Error:', error)
} finally {
setFontsLoaded(true)
}
}
const loadIconsAsync = async () => {
try {
await Font.loadAsync({
IcoMoonFont: require('../assets/icons/icomoonFont.ttf')
})
} catch (error) {
// console.log('Icon Font Load Error:', error)
} finally {
setIconsLoaded(true)
}
}
useEffect(() => {
loadFontAsync()
loadIconsAsync()
}, [])
return {
fontsLoaded,
iconsLoaded
}
}
Icon.tsx
import { createIconSetFromIcoMoon } from '@expo/vector-icons'
import icoMoonConfig from '../assets/icons/icoMoonConfig.json'
const Icon = createIconSetFromIcoMoon(
icoMoonConfig,
'IcoMoonFont',
'iconmoonFont.ttf'
)
export default Icon
and finally an instance of icon:
<Icon name="add" color="blue" size={50} />
RESULT:
It'd be cool to have a Discord for the community around this stack.
I need to override the router back action per screen, haven't been able to find a solution to this problem.
Hey I love this, great work!
As mentioned on twitter I got an error running create-solito-app. Setting up with vercel got me a 404 though that could easily be a me problem since I've not used it before.
npx create-solito-app@latest my-solito-app
npx: installed 82 in 10.733s
yarn run v1.23.0-20211220.1904
error Couldn't find a package.json file in "/Users/danny/workspace/solito"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Command failed: yarn ts-node index.ts
running
macos 12.2.1
node v14.19.0
yarn 1.23.0-20211220.1904
let me know if you need any more details.
Hey @nandorojo, huge fan of your work here
I've created a repo using create-solito-app yesterday, but I'm having some issues. Maybe I'm missing something, but I don't have much knowledge on monorepos
With Eslint, next/ has its own .eslintrc.js. How can I extend with my own config there? I do have my own Eslint npm package. One side note, running the nextjs app was not working until I added this:
module.exports = {
extends: 'next',
root: true,
rules: {
'@next/next/no-html-link-for-pages': ['error', 'apps/next/pages/'],
},
};Maybe this should be in the template?
And with Typescript, my intellisense is a mess on Vscode. Some auto imports simply just not work.
Example: I just deleted MotiLink import from this template file, but Typescript can't find MotiLink to import
This was only one example, but I'm having this same problem with some other packages, depending from where I try to import them.
Currently, I've just added some devDependencies on root, like husky, lint-staged and commitlint for example.
Can you help me out?
First of all, a huge THANK YOU for making this framework and paving the path to more sane cross-platform development.
I'm not sure if it's just my machine or configuration, but I've noticed the colors property for makeTheme from drispy does not work with the starter repository.
Using the following code in the dripsy docs does not seem to have an affect on the DripsyProvider for Next:
import { makeTheme } from 'dripsy'
const darkColors = {
$background: 'black',
$text: 'white',
}
export const theme = makeTheme({
colors: darkColors,
})
Inputting the hex color #000 doesn't seem to work either. I haven't seen any discussion on dripsy theming, so please let me know if I'm missing anything solito specific.
I'm using the repository via Vercel deployment button and have not made any other changes/configurations.
My machine info (probably irrelevant):
MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
Intel Iris Plus Graphics 1536 MB
2.3 GHz Quad-Core Intel Core i7
I'm still new to this framework, so hopefully, it's not too stupid of a question.
Thank you again!
Hey, Fernando thanks for the work on solito and all the react-native-web ecosystem! Great work man!
I've been playing around with a create-solito-app application. During the dev workflow everything worked like a charm, but, when I tried to build my application, the expo build just spits an app which just render a blank screen. The 'nextjs' build works fine tough
I've tried generating the build both by using expo legacy build, with the command:
expo build:android
and with eas, by using:
eas build
and configuring eas to build an apk, so I could test it locally.
both build commands were run from inside the expo folder.
Both methods ended in the same result, a successfully generated apk that renders a blank screen and nothing else:
So I wondered, maybe I did something wrong in my application and decided to test if I could generate a working build from a fresh, unmodified create-solito-app, and the build generated from it only rendered a blank page as well.
Are there any extra steps I need to take before generating my build? or is simply running the regular build commands supposed to work ?
Sorry, Discussions aren't enabled for this repo, but I'm super interested in your stack.
Hi @nandorojo ,
Thanks for building an awesome piece of tech.
I see that the package.json file in next app imports "app": "*", as one of its dependencies.
Does that mean that libraries like react-navigation or react-native-safe-area, which are under the dependencies in packages/app but are a no-op on web, will still be included in the next app bundle?
Should I be worried about bloating the web bundle size like this by adding packages to package.json under packages/app?
I've got a blog/[slug].js structure
In react navigation I have
<NavigationContainer
linking={useMemo(
() => ({
prefixes: [Linking.createURL('/')],
config: {
initialRouteName: 'home',
screens: {
HomeScreen: '',
BlogScreen: 'blog',
BlogSlugScreen: 'blog/:slug',
CourseSlugScreen: ':courseSlug/:categorySlug/:slug',
...
In the Blog screen I have:
import { createParam } from 'solito'
const { useParam } = createParam()
export function BlogSlugScreen({ route }) {
const [slug] = useParam('slug')
console.log('slug', slug)
console.log('route', route)
...
So, first time a select a post, slug keeps the right value and same thing for route.params.slug.
But next times, route.params.slug stores the right value while slug keeps storing the first selected (it's not updated). Is it a bug ?
I tried the clone and deploy and even though it builds properly, the resultant website shows a 404: https://test-solito.vercel.app/.
Checking the output for the deployment in the Vercel dashboard, I see that the output somehow isn't actually the build folder:
In the docs for useParam, you say The values of Query must be primitives, such as strings/booleans/numbers, since you can't use nested fields in a URL with next router.
However, with Next, when using optional params eg. [...slug], the param is returned as an array. This is breaking typescript stuff for me when trying to use createParam/useParam.
I'd like to have a create-solito-app CLI. It can be really basic. It can read from the example-monorepos folder, which currently only has one option.
hey - we're starting a new cross-platform project soon and solito looks perfect for the job! I noticed that the deep linking section on the docs is just a placeholder, is that because this isn't possible yet or that it's just not documented yet? we'll definitely need deep linking capabilities which is why I'm enquiring before we get started
thanks so much!
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.