7 |
21 | );
22 | };
23 |
24 | export default Downloads;
25 |
--------------------------------------------------------------------------------
/docs/src/components/FooterBackground/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './styles.module.css';
3 |
4 | const FooterBackground = () => {
5 | return (
6 |
8 |
20 | +1 000 000 / week
9 |10 | React Native Screens is directly used in the React Navigation and Expo 11 | Router libraries, some of the most popular libraries in the React 12 | Native ecosystem. That's why nearly every second project uses React 13 | Native Screens in React Native applications. 14 |
15 |
16 | 
17 | 
18 |
19 |
17 |
18 |
7 |
8 |
9 | );
10 | };
11 |
12 | export default FooterBackground;
13 |
--------------------------------------------------------------------------------
/docs/src/components/Hero/LandingBackground/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
3 | import ScreenSequence from '@site/src/components/Hero/ScreenSequence';
4 | import styles from './styles.module.css';
5 |
6 | const LandingBackground = () => {
7 | return (
8 | <>
9 |
10 | {ExecutionEnvironment.canUseViewport &&
9 | {ExecutionEnvironment.canUseViewport &&
11 | );
12 | };
13 |
14 | export default ScreenSequence;
15 |
--------------------------------------------------------------------------------
/docs/src/components/LearnMore/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './styles.module.css';
3 | import HomepageButton, {
4 | ButtonStyling,
5 | BorderStyling,
6 | } from '@site/src/components/HomepageButton';
7 |
8 | const LearnMore = () => {
9 | return (
10 |
11 |
23 | );
24 | };
25 |
26 | export default LearnMore;
27 |
--------------------------------------------------------------------------------
/docs/src/components/LearnMore/styles.module.css:
--------------------------------------------------------------------------------
1 | .learnMoreContainer {
2 | display: flex;
3 | flex-direction: row;
4 | justify-content: space-between;
5 | }
6 |
7 | .learnMoreContent {
8 | display: flex;
9 | flex-direction: column;
10 | gap: 0.5rem;
11 | width: 75%;
12 | text-wrap: balance;
13 | }
14 |
15 | .learnMoreContent > h4 {
16 | font-weight: 500;
17 | font-size: 24px;
18 | }
19 |
20 | .learnMoreContent > p {
21 | font-size: 20px;
22 | font-weight: 400;
23 | }
24 |
25 | @media (max-width: 996px) {
26 | .learnMoreContainer {
27 | flex-direction: column;
28 | }
29 |
30 | .learnMoreContent {
31 | width: 100%;
32 | align-items: center;
33 | margin-bottom: 0.5rem;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/docs/src/components/Overview/styles.module.css:
--------------------------------------------------------------------------------
1 | .title {
2 | font-size: 48px;
3 | font-weight: 700;
4 | line-height: 56px;
5 | }
6 |
7 | .overviewContainer {
8 | display: grid;
9 | grid-template-columns: 1fr;
10 | gap: 6.5rem;
11 | }
12 |
13 | @media (max-width: 996px) {
14 | .overviewContainer {
15 | display: flex !important;
16 | flex-direction: column;
17 | gap: 3.5rem;
18 | }
19 | .title {
20 | font-size: 40px;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/docs/src/components/Sponsors/styles.module.css:
--------------------------------------------------------------------------------
1 | .sponsorsTitle {
2 | font-size: 48px;
3 | margin-bottom: 4rem;
4 | text-align: center;
5 | }
6 |
7 | .sponsorsBrand {
8 | margin-top: 5rem;
9 | display: flex;
10 | justify-content: center;
11 | gap: 4rem;
12 | }
13 |
14 | @media (max-width: 996px) {
15 | .sponsorsTitle {
16 | font-size: 40px;
17 | }
18 | .sponsorsBrand {
19 | margin: 2.5rem auto 5.5rem;
20 | gap: 3rem;
21 | }
22 | .sponsor {
23 | width: 170px;
24 | height: auto;
25 | }
26 | }
27 |
28 | @media (max-width: 420px) {
29 | .sponsorsTitle {
30 | font-size: 24px;
31 | }
32 | .sponsorsBrand {
33 | gap: 2.5rem;
34 | }
35 | .sponsor {
36 | width: 120px;
37 | height: auto;
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/docs/src/components/Testimonials/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './styles.module.css';
3 | import TestimonialList from '@site/src/components/Testimonials/TestimonialList';
4 |
5 | const Testimonals = () => {
6 | return (
7 |
12 |
15 | React Native Screens is the first library migrated to Fabric!
13 |Learn more about the new architecture in React Native Screens.
14 |
8 |
13 | );
14 | };
15 |
16 | export default Testimonals;
17 |
--------------------------------------------------------------------------------
/docs/src/css/custom.css:
--------------------------------------------------------------------------------
1 | @import 'colors.css';
2 | @import 'typography.css';
3 | @import 'overrides.css';
4 |
--------------------------------------------------------------------------------
/docs/src/hooks/usePageType.tsx:
--------------------------------------------------------------------------------
1 | import { useLocation } from '@docusaurus/router';
2 | import useBaseUrl from '@docusaurus/useBaseUrl';
3 |
4 | const usePageType = () => {
5 | const location = useLocation();
6 | const baseUrl = useBaseUrl('/');
7 |
8 | return {
9 | isDocumentation: location.pathname.startsWith(`${baseUrl}docs`),
10 | isLanding: location.pathname === baseUrl,
11 | };
12 | };
13 |
14 | export default usePageType;
15 |
--------------------------------------------------------------------------------
/docs/src/pages/styles.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 60%;
3 | margin: 0 auto;
4 | display: flex;
5 | flex-direction: column;
6 | gap: 6.5rem;
7 | }
8 |
9 | @media (max-width: 1440px) {
10 | .container {
11 | width: 75%;
12 | }
13 | }
14 |
15 | @media (max-width: 996px) {
16 | .container {
17 | width: 85%;
18 | gap: 3.5rem;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/docs/src/theme/Footer/index.js:
--------------------------------------------------------------------------------
1 | import { Footer } from '@swmansion/t-rex-ui';
2 |
3 | export default Footer;
4 |
--------------------------------------------------------------------------------
/docs/src/theme/Navbar/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Navbar } from '@swmansion/t-rex-ui';
3 |
4 | export default function NavbarWrapper(props) {
5 | return (
6 |
9 |
12 |