Skip to content

Commit aae0811

Browse files
rayan1810rayan1810
authored
Merge pull request #237 from GeekyAnts/staging
Staging
2 parents d101eec + 2461413 commit aae0811

File tree

7 files changed

+733
-10
lines changed

7 files changed

+733
-10
lines changed

‎docs/3.3.x/next-adapter.md‎

Lines changed: 350 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,350 @@
1+
---
2+
id: next-adapter
3+
title: NativeBase next-adapter
4+
---
5+
6+
[Next.js](https://nextjs.org/) is a React framework that provides simple page-based routing as well as server-side rendering. To use Next.js with native-base for web we recommend that you use a library called `[@native-base/next-adapter](https://github.com/GeekyAnts/native-base-next-adapter)` to handle the configuration and integration of the tools.
7+
8+
## Built With
9+
10+
- next
11+
- react
12+
- react-dom
13+
- typescript
14+
- tsc
15+
- react-native-web
16+
17+
### Usage
18+
19+
- `yarn add @native-base/next-adapter next-compose-plugins next-transpile-modules next-fonts -D`
20+
- `yarn add react-native-web native-base react-native-svg react-native-safe-area-context`
21+
- Re-export the custom `Document` component in the **`pages/_document.js`** file of your Next.js project.
22+
- This will ensure `react-native-web` styling works.
23+
- Wraps all the css in style tag on server side (thus preventing css flicker issue)
24+
- Or you can create the file - `mkdir pages; touch pages/_document.js`
25+
26+
**pages/_document.js**
27+
28+
`export { default } from '@native-base/next-adapter/document';`
29+
30+
- Update `next.config.json` with below code
31+
32+
Custom withNativebase function implements withPlugins function from [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins#usage).
33+
34+
WithNativebase function takes in 2 parameters :
35+
36+
```jsx
37+
type withNativebaseParam = {
38+
config: ConfigType;
39+
phase?: Array;
40+
}
41+
42+
type ConfigType = {
43+
dependencies?: Array<string>;
44+
plugins?: Array<function>;
45+
nextConfig?: Object;
46+
};
47+
```
48+
49+
50+
1. config parameter is an object with 3 keys
51+
52+
- dependencies: List of dependencies which are transpiled using `[next-transpile-modules](https://github.com/martpie/next-transpile-modules)` .
53+
54+
55+
```jsx
56+
const { withNativebase } = require("@native-base/next-adapter");
57+
58+
module.exports = withNativebase({
59+
dependencies: [
60+
"@expo/next-adapter",
61+
"react-native-vector-icons",
62+
"react-native-vector-icons-for-web",
63+
],
64+
});
65+
```
66+
67+
- plugins: It is an array containing all plugins and their configuration.
68+
69+
70+
```jsx
71+
const { withNativebase } = require("@native-base/next-adapter");
72+
const sass = require("@zeit/next-sass");
73+
74+
module.exports = withNativebase({
75+
plugins: [[sass]],
76+
});
77+
```
78+
79+
- nextConfig: Configuration for the plugin. You can also overwrite specific configuration keys for a phase:
80+
81+
82+
```jsx
83+
const { withNativebase } = require("@native-base/next-adapter");
84+
85+
module.exports = withNativebase({
86+
nextConfig: {
87+
projectRoot: __dirname,
88+
webpack: (config, options) => {
89+
config.resolve.alias = {
90+
...(config.resolve.alias || {}),
91+
"react-native$": "react-native-web",
92+
"@expo/vector-icons": "react-native-vector-icons",
93+
};
94+
config.resolve.extensions = [
95+
".web.js",
96+
".web.ts",
97+
".web.tsx",
98+
...config.resolve.extensions,
99+
];
100+
return config;
101+
},
102+
},
103+
});
104+
```
105+
106+
1. phase
107+
108+
If the plugin should only be applied in specific phases, you can specify them here. You can use all phases [next.js provides](https://github.com/zeit/next.js/blob/canary/packages/next/next-server/lib/constants.ts#L1-L4).
109+
110+
111+
```jsx
112+
const withPlugins = require('next-compose-plugins');
113+
const { PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD } = require('next/constants');
114+
const sass = require('@zeit/next-sass');
115+
116+
module.exports = withPlugins([
117+
[sass, {
118+
cssModules: true,
119+
cssLoaderOptions: {
120+
localIdentName: '[path]___[local]___[hash:base64:5]',
121+
},
122+
}, [PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD]],
123+
]);
124+
```
125+
https://user-images.githubusercontent.com/47877976/151315307-dd70e9e9-15b0-44e5-831a-bb0e4be090be.mp4
126+
127+
128+
129+
## Steps to integrate icons in Nextjs with native-base
130+
- yarn add @expo/next-adapter react-native-vector-icons @expo/vector-icons
131+
- We need to overwrite `next.config.js` with custom webpack configurations
132+
133+
```jsx
134+
const { withNativebase } = require("@native-base/next-adapter");
135+
136+
module.exports = withNativebase({
137+
dependencies: [
138+
"@expo/next-adapter",
139+
"react-native-vector-icons",
140+
"react-native-vector-icons-for-web",
141+
],
142+
nextConfig: {
143+
projectRoot: __dirname,
144+
webpack: (config, options) => {
145+
config.resolve.alias = {
146+
...(config.resolve.alias || {}),
147+
"react-native$": "react-native-web",
148+
"@expo/vector-icons": "react-native-vector-icons",
149+
};
150+
config.resolve.extensions = [
151+
".web.js",
152+
".web.ts",
153+
".web.tsx",
154+
...config.resolve.extensions,
155+
];
156+
return config;
157+
},
158+
},
159+
});
160+
```
161+
162+
- Re-export the custom `Document` component in the **pages/_document.js** file of your Next.js project.
163+
- This will ensure all fonts are loaded in style tag.
164+
- Or you can create the file - `mkdir pages; touch pages/_document.js`
165+
166+
**pages/_document.js**
167+
168+
```jsx
169+
import { default as NativebaseDocument } from "@native-base/next-adapter/document";
170+
import NextDocument, { Html, Head, Main, NextScript } from "next/document";
171+
export { default as ExpoDocument } from "@expo/next-adapter/document";
172+
import EntypoFont from "react-native-vector-icons/Fonts/Entypo.ttf";
173+
import AntDesignFont from "react-native-vector-icons/Fonts/AntDesign.ttf";
174+
import EvilIconsFont from "react-native-vector-icons/Fonts/EvilIcons.ttf";
175+
import FeatherFont from "react-native-vector-icons/Fonts/Feather.ttf";
176+
import FontAwesomeFont from "react-native-vector-icons/Fonts/FontAwesome.ttf";
177+
import FontistoFont from "react-native-vector-icons/Fonts/Fontisto.ttf";
178+
import FoundationFont from "react-native-vector-icons/Fonts/Foundation.ttf";
179+
import IoniconsFont from "react-native-vector-icons/Fonts/Ionicons.ttf";
180+
import MaterialCommunityIconsFont from "react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf";
181+
import MaterialIconsFont from "react-native-vector-icons/Fonts/MaterialIcons.ttf";
182+
import OcticonsFont from "react-native-vector-icons/Fonts/Octicons.ttf";
183+
import SimpleLineIconsFont from "react-native-vector-icons/Fonts/SimpleLineIcons.ttf";
184+
import ZocialFont from "react-native-vector-icons/Fonts/Zocial.ttf";
185+
import * as React from "react";
186+
import { AppRegistry } from "react-native";
187+
188+
class Document extends NativebaseDocument {
189+
render() {
190+
return (
191+
<Html style={{ height: "100%" }}>
192+
<Head />
193+
<body style={{ height: "100%", overflow: "hidden" }}>
194+
<Main />
195+
<NextScript />
196+
</body>
197+
</Html>
198+
);
199+
}
200+
}
201+
202+
export const style =
203+
204+
html, body, #__next {
205+
width: 100%;
206+
/* To smooth any scrolling behavior */
207+
-webkit-overflow-scrolling: touch;
208+
margin: 0px;
209+
padding: 0px;
210+
/* Allows content to fill the viewport and go beyond the bottom */
211+
min-height: 100%;
212+
}
213+
@font-face {
214+
src: url(${EntypoFont});
215+
font-family: Entypo;
216+
}
217+
@font-face {
218+
src: url(${EvilIconsFont});
219+
font-family: EvilIcons;
220+
}
221+
@font-face {
222+
src: url(${FontAwesomeFont});
223+
font-family: FontAwesome;
224+
}
225+
@font-face {
226+
src: url(${FeatherFont});
227+
font-family: Feather;
228+
}
229+
@font-face {
230+
src: url(${IoniconsFont});
231+
font-family: Ionicons;
232+
}
233+
@font-face {
234+
src: url(${FoundationFont});
235+
font-family: Foundation;
236+
}
237+
@font-face {
238+
src: url(${MaterialIconsFont});
239+
font-family: MaterialIcons;
240+
}
241+
@font-face {
242+
src: url(${MaterialCommunityIconsFont});
243+
font-family: MaterialCommunityIcons;
244+
}
245+
@font-face {
246+
src: url(${ZocialFont});
247+
font-family: Zocial;
248+
}
249+
@font-face {
250+
src: url(${SimpleLineIconsFont});
251+
font-family: SimpleLineIcons;
252+
}
253+
@font-face {
254+
src: url(${OcticonsFont});
255+
font-family: Octicons;
256+
}
257+
@font-face {
258+
src: url(${FontistoFont});
259+
font-family: Fontisto;
260+
}
261+
@font-face {
262+
src: url(${AntDesignFont});
263+
font-family: AntDesign;
264+
}
265+
#__next {
266+
flex-shrink: 0;
267+
flex-basis: auto;
268+
flex-direction: column;
269+
flex-grow: 1;
270+
display: flex;
271+
flex: 1;
272+
}
273+
html {
274+
scroll-behavior: smooth;
275+
/* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
276+
-webkit-text-size-adjust: 100%;
277+
height: 100%;
278+
}
279+
body {
280+
display: flex;
281+
/* Allows you to scroll below the viewport; default value is visible */
282+
overflow-y: auto;
283+
overscroll-behavior-y: none;
284+
text-rendering: optimizeLegibility;
285+
-webkit-font-smoothing: antialiased;
286+
-moz-osx-font-smoothing: grayscale;
287+
-ms-overflow-style: scrollbar;
288+
}
289+
;
290+
291+
export async function getInitialProps({ renderPage }) {
292+
AppRegistry.registerComponent("Main", () => Main);
293+
const { getStyleElement } = AppRegistry.getApplication("Main");
294+
const page = await renderPage();
295+
const styles = [
296+
// eslint-disable-next-line react/jsx-key
297+
<style dangerouslySetInnerHTML={{ __html: style }} />,
298+
getStyleElement(),
299+
];
300+
return { ...page, styles: React.Children.toArray(styles) };
301+
}
302+
Document.getInitialProps = getInitialProps;
303+
304+
export default Document;
305+
```
306+
307+
- Create a **babel.config.js** and use [babel-preset-expo](https://github.com/expo/expo/tree/master/packages/babel-preset-expo)
308+
- You may have installed this earlier with `yarn add -D babel-preset-expo` **babel.config.js**
309+
310+
```jsx
311+
module.exports = {
312+
presets: ["@expo/next-adapter/babel"],
313+
};
314+
```
315+
316+
317+
- Then we can directly use icons
318+
319+
```jsx
320+
import React from "react";
321+
import { Box, Icon } from "native-base";
322+
import Entypo from "@expo/vector-icons/Entypo";
323+
324+
export default function App() {
325+
return (
326+
<Box>
327+
<Icon
328+
as={Entypo}
329+
name="user"
330+
color="coolGray.800"
331+
_dark={{
332+
color: "warmGray.50",
333+
}}
334+
/>
335+
</Box>
336+
);
337+
}
338+
```
339+
340+
## Contributing
341+
342+
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
343+
344+
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
345+
346+
1. Fork the Project
347+
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
348+
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
349+
4. Push to the Branch (`git push origin feature/AmazingFeature`)
350+
5. Open a Pull Request

‎docs/3.3.x/sidebar.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@
3434
"title": "Installation",
3535
"notVisibleInSidebar": true
3636
},
37-
37+
{
38+
"id": "next-adapter",
39+
"title": "Next Adapter for nativebase",
40+
"notVisibleInSidebar": true
41+
},
3842
{
3943
"id": "setup-provider",
4044
"title": "Setup NativeBase Provider"

0 commit comments

Comments
 (0)