Skip to content

Commit

Permalink
Fix lint warnings
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Nov 22, 2023
1 parent 152bcc4 commit 0eb4fa0
Show file tree
Hide file tree
Showing 9 changed files with 22 additions and 22 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<h1 align="center"><a href="https://reactnavigation.org/"> <img src="static/img/react_navigation_header.png" width="400" /> </a></h1>
<h1 align="center"><a href="https://reactnavigation.org/"> <img src="static/img/react_navigation_header.png" width="400" alt="React Navigation Logo" /> </a></h1>

Want to help improve the documentation? That would be so very much appreciated. Some information on that below.

Expand Down
4 changes: 2 additions & 2 deletions blog/2019-10-17-react-navigation-native.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ After years of growing development, we need to admit that we’re not always abl

Thanks to the great work of Krzysztof Magiera for [React Native Screens](https://github.com/kmagiera/react-native-screens) library now we can use truly native components instead of JS replicas.

<img src="/assets/blog/android-native-stack.gif" height="530" />
<img src="/assets/blog/ios-native-stack.gif" height="530" />
<img src="/assets/blog/android-native-stack.gif" height="530" alt="Native Stack on Android" />
<img src="/assets/blog/ios-native-stack.gif" height="530" alt="Native Stack on iOS" />

We believe you will find it useful in your projects and strongly encourage you to get acquainted with our [documentation](https://github.com/kmagiera/react-native-screens/native-stack). Things that I’m the most excited about are iOS header animations!

Expand Down
12 changes: 6 additions & 6 deletions blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ The new React Navigation comes with several significant improvements such as [im

The UI Kitten team started actively using React Navigation alpha and we're proud to announce the full compatibility to the new React Navigation API. In this guide, we won't consider how to implement all of the boilerplate stuff like auth screens. Instead, we will learn how to navigate between screens using Drawer, Bottom Tabs, Top Tabs, and Stack navigators to build a TODO-App. Furthermore, we'll demonstrate using React Navigation with UI Kitten components.

<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/overview.gif" height="480"/>
<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/overview.gif" height="480" alt="React Navigation with UI Kitten Overview" />

## Overview

Expand Down Expand Up @@ -93,7 +93,7 @@ export const AppNavigator = (): React.ReactElement => (
);
```

<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/stack-navigator.gif" height="420" />
<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/stack-navigator.gif" height="420" alt="UI Kitten with Stack Navigator" />

### Step 2. Top tabs

Expand Down Expand Up @@ -185,7 +185,7 @@ export const AppNavigator = (props): React.ReactElement => (
);
```

<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/material-top-tab-navigator.gif" height="480" />
<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/material-top-tab-navigator.gif" height="480" alt="UI Kitten with Material Top Tabs" />

### Step 3. Bottom tabs

Expand Down Expand Up @@ -299,7 +299,7 @@ export const AppNavigator = (props): React.ReactElement => (
);
```

<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/bottom-tab-navigator.gif" height="480" />
<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/bottom-tab-navigator.gif" height="480" alt="UI Kitten with Bottom Tabs" />

### Step 4. Drawer menu

Expand Down Expand Up @@ -435,7 +435,7 @@ export const TodoTabBar = (props): SafeAreaLayoutElement => {
};
```

<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/drawer-navigator.gif" height="420" />
<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/drawer-navigator.gif" height="420" alt="UI Kitten with Drawer" />

### TypeScript

Expand Down Expand Up @@ -472,7 +472,7 @@ export interface ResetPasswordScreenProps {

Now you can modify props of Auth screens props by adding types to make your autocomplete and IntelliSense work. For more complex examples, consider reading [type-checking](/docs/typescript) doc or reviewing [complete demo application sources](https://github.com/artyorsh/react-navigation-ex-demo/tree/complete-exmaples).

<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/typescript.gif" />
<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/typescript.gif" alt="UI Kitten & TypeScript" />

### Useful links

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ In this guide, we would like to show you how to integrate React Navigation with

In the following gif, you can see what is the final version of the app gonna looks like:

<img src="/assets/blog/using-react-navigation-5-with-paper/final-app.gif" height="480"/>
<img src="/assets/blog/using-react-navigation-5-with-paper/final-app.gif" height="480" alt="Final Result" />

## Overview of the App

Expand Down Expand Up @@ -142,7 +142,7 @@ export const RootNavigator = () => {

That's what we see on a screen:

<img src="/assets/blog/using-react-navigation-5-with-paper/simple-drawer.gif" height="480"/>
<img src="/assets/blog/using-react-navigation-5-with-paper/simple-drawer.gif" height="480" alt="Simple Drawer" />

We can open a drawer with a swipe gesture, it looks very smooth. However, the UI doesn't look very impressive so let's add more content to the drawer to make it look just like in the final version.

Expand Down Expand Up @@ -305,7 +305,7 @@ const styles = StyleSheet.create({

The final version of a drawer looks like this:

<img src="/assets/blog/using-react-navigation-5-with-paper/final-drawer.gif" height="480"/>
<img src="/assets/blog/using-react-navigation-5-with-paper/final-drawer.gif" height="480" alt="Drawer with components from React Native Paper" />

## Stack Navigator + Paper's Appbar

Expand Down Expand Up @@ -460,7 +460,7 @@ We have covered only the basics of navigating between screens. If you want to le

Now, let's see what does the app looks like with Stack Navigator and Paper's Appbar.

<img src="/assets/blog/using-react-navigation-5-with-paper/stack.gif" height="480"/>
<img src="/assets/blog/using-react-navigation-5-with-paper/stack.gif" height="480" alt="Stack Navigator with React Native Paper's Appbar" />

We still miss the last piece of our navigation flow - **Tab Navigator**. Let's move to the next section where we will take care of it.

Expand Down Expand Up @@ -530,7 +530,7 @@ export const BottomTabs = () => {
When we check the screen of the phone now, we will see a nice looking, material bottom navigation. What's more, Stack Navigator integrates nicely with Tab.Navigator and we can still navigate to the tweet `Details` screen.

<br />
<img src="/assets/blog/using-react-navigation-5-with-paper/bottom-navigation.gif" height="480"/>
<img src="/assets/blog/using-react-navigation-5-with-paper/bottom-navigation.gif" height="480" alt="Stack Navigator with Material Bottom Tabs" />

## FAB and Portal

Expand Down Expand Up @@ -749,7 +749,7 @@ export const BottomTabs = props => {
};
```
<img src="/assets/blog/using-react-navigation-5-with-paper/fab.gif" height="480"/>
<img src="/assets/blog/using-react-navigation-5-with-paper/fab.gif" height="480" alt="React Native Paper's FAB with Bottom Tabs" />
As you can see on the gif, the FAB button works in the same way as in a Twitter app.
What's more, it even animates icon change properly even though we haven't implemented it. That's the behavior we get from React Native Paper's FAB out of the box.
Expand Down Expand Up @@ -927,7 +927,7 @@ Firstly, we get a current theme using `useTheme` hook from Paper. This means we
You should be able to toggle a switch now and both `Provider` from Paper and `NativeNavigationContainer` from React Navigation will automatically apply correct colors to the components.
<br />
<img src="/assets/blog/using-react-navigation-5-with-paper/theming.gif" height="480"/>
<img src="/assets/blog/using-react-navigation-5-with-paper/theming.gif" height="480" alt="Theming with React Navigation and React Native Paper" />
## Summary
Expand Down
4 changes: 2 additions & 2 deletions blog/2020-02-06-react-navigation-5.0.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,8 @@ You don't need to use Redux in your apps for this to work and it works without a

Traditionally, we have written our navigators in JavaScript for greater customizability. It fits a lot of use cases, but sometimes you want the exact native feel and the performance of native navigation. Now, we have added a new native stack navigator that uses native navigation primitives for navigation using the [`react-native-screens`](https://github.com/kmagiera/react-native-screens) library. Under the hood, it just uses native components which might be obvious choice for native development and might be a good pick in the most cases.

<img src="/assets/blog/android-native-stack.gif" height="530" />
<img src="/assets/blog/ios-native-stack.gif" height="530" />
<img src="/assets/blog/android-native-stack.gif" height="530" alt="Native Stack on Android" />
<img src="/assets/blog/ios-native-stack.gif" height="530" alt="Native Stack on iOS" />

### Native backends for Material top tab navigator

Expand Down
2 changes: 1 addition & 1 deletion blog/2020-05-16-web-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ URL integration isn't enough to have proper web support. The navigators also nee

The first change is using anchor tags. When you use built-in navigators such as drawer navigator and tab navigator, they render anchor tags for the drawer and tab items respectively when you have linking configured. This means that they behave the same as normal links on the web.

<img src="/assets/blog/web-support/link-right-click.png" height="427"/>
<img src="/assets/blog/web-support/link-right-click.png" height="427" alt="Demo for Right Click on links" />

### No gestures and animations

Expand Down
2 changes: 1 addition & 1 deletion src/pages/help.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Resources to get help with React Navigation.
hide_table_of_contents: true
---

# Need help?
## Need help?

If you've encountered a bug with React Navigation, please [post an issue](https://github.com/react-navigation/react-navigation/issues) and be sure to fill out the issue template.

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/tab-view.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ React Native Tab View is a cross-platform Tab View component for React Native im
It follows material design guidelines by default, but you can also use your own custom tab bar or position the tab bar at the bottom.

<div style={{ display: 'flex', margin: '16px 0' }}>
<img src="/assets/libraries/tab-view.gif" width="360px" />
<img src="/assets/libraries/tab-view.gif" width="360px" alt="React Native Tab View Demo" />
</div>

This package doesn't integrate with React Navigation. If you want to integrate the tab view with React Navigation's navigation system, e.g. want to show screens in the tab bar and be able to navigate between them using `navigation.navigate` etc, use [Material Top Tab Navigator](material-top-tab-navigator.md) instead.
Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-7.x/tab-view.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ React Native Tab View is a cross-platform Tab View component for React Native im
It follows material design guidelines by default, but you can also use your own custom tab bar or position the tab bar at the bottom.

<div style={{ display: 'flex', margin: '16px 0' }}>
<img src="/assets/libraries/tab-view.gif" width="360px" />
<img src="/assets/libraries/tab-view.gif" width="360px" alt="React Native Tab View Demo" />
</div>

This package doesn't integrate with React Navigation. If you want to integrate the tab view with React Navigation's navigation system, e.g. want to show screens in the tab bar and be able to navigate between them using `navigation.navigate` etc, use [Material Top Tab Navigator](material-top-tab-navigator.md) instead.
Expand Down

0 comments on commit 0eb4fa0

Please sign in to comment.