diff --git a/docs/Tutorial.md b/docs/Tutorial.md index bd6ff92de..81460dbe9 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -109,9 +109,9 @@ And lastly we need to apply this still to the Image component: Press cmd+R and the image should now render. -Screenshot: - -screenshot +
+ +
### Add some styling @@ -182,9 +182,9 @@ This is pretty straightforward if you've ever seen CSS before. Make the title la Go ahead and press cmd+R and you'll see the updated view. -Screenshot: - -screenshot +
+ +
### Fetching real data @@ -274,9 +274,9 @@ Now modify the render function to render a loading view if we don't have any mov Now press cmd+R and you should see "Loading movies..." until the response comes back, then it will render the first movie it fetched from Rotten Tomatoes. -Screenshot: - -screenshot +
+ +
## ListView @@ -345,9 +345,13 @@ And here's the modified this.setState in the response handler in fetchData: }, ``` -Screenshot: +And here's the final result: -screenshot +
+ +
+ +There's still some work to be done to make it a fully functional app such as adding navigation, search, infinite scroll loading, etc. Check the [Movies Example](https://github.com/facebook/react-native/tree/master/Examples/Movies) to see it all working. ### Final source code diff --git a/docs/images/TutorialFinal.png b/docs/images/TutorialFinal.png deleted file mode 100644 index 7f0ab5fda..000000000 Binary files a/docs/images/TutorialFinal.png and /dev/null differ diff --git a/docs/images/TutorialMock.png b/docs/images/TutorialMock.png deleted file mode 100644 index 461a4ddfc..000000000 Binary files a/docs/images/TutorialMock.png and /dev/null differ diff --git a/docs/images/TutorialSingleFetched.png b/docs/images/TutorialSingleFetched.png deleted file mode 100644 index 3b223e52e..000000000 Binary files a/docs/images/TutorialSingleFetched.png and /dev/null differ diff --git a/docs/images/TutorialStyledMock.png b/docs/images/TutorialStyledMock.png deleted file mode 100644 index ad097f3c2..000000000 Binary files a/docs/images/TutorialStyledMock.png and /dev/null differ diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index ad080ff61..113bf0d20 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -455,6 +455,14 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li margin-left: 0; } +.tutorial-mock { + text-align: center; +} +.tutorial-mock img { + border: 1px solid #ccc; + box-shadow: 5px 5px 5px #888888; +} + #examples h3, .home-presentation h3 { color: #2d2d2d; font-size: 24px; diff --git a/website/src/react-native/img/TutorialFinal.png b/website/src/react-native/img/TutorialFinal.png new file mode 100644 index 000000000..72ee2a27e Binary files /dev/null and b/website/src/react-native/img/TutorialFinal.png differ diff --git a/website/src/react-native/img/TutorialMock.png b/website/src/react-native/img/TutorialMock.png new file mode 100644 index 000000000..a89499209 Binary files /dev/null and b/website/src/react-native/img/TutorialMock.png differ diff --git a/website/src/react-native/img/TutorialSingleFetched.png b/website/src/react-native/img/TutorialSingleFetched.png new file mode 100644 index 000000000..bb8e0219d Binary files /dev/null and b/website/src/react-native/img/TutorialSingleFetched.png differ diff --git a/website/src/react-native/img/TutorialStyledMock.png b/website/src/react-native/img/TutorialStyledMock.png new file mode 100644 index 000000000..1f54d3c0d Binary files /dev/null and b/website/src/react-native/img/TutorialStyledMock.png differ