Skip to content

Instantly share code, notes, and snippets.

@mxmzb

mxmzb/screen.js

Last active August 27, 2018 13:22
Show Gist options
  • Save mxmzb/c266c48e9ec16c7c44d8f020a0c58f08 to your computer and use it in GitHub Desktop.
Save mxmzb/c266c48e9ec16c7c44d8f020a0c58f08 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mxmzb revised this gist Aug 27, 2018. 1 changed file with 11 additions and 4 deletions.
    15 changes: 11 additions & 4 deletions screen.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,17 @@
    import React from "react";
    import React, { Fragment } from "react";
    import { SafeAreaView } from "react-native";
    import { Query } from "react-apollo";
    import { scheduleQuery } from "src/modules/Schedule/graphql/queries";

    import { Header } from "src/modules/shared/components";
    import { Header, HeaderConfig } from "src/modules/shared/components";
    import { ScheduleFull } from "src/modules/Schedule/components";

    export default class ScheduleScreen extends React.PureComponent {
    static navigationOptions = ({ navigation }) => {
    return {
    header: () => <Header showBack navigation={navigation} title={"I WANT QUERY DATA HERE WITHOUT WRAPPING THIS IN ANOTHER QUERY COMPONENT"} />,
    // foo.title here should be `null` while loading and "bar" after data loaded
    // Receiver might be moved into the Header component as well, shouldn't really matter
    header: () => <Receiver>{foo => (<Header showBack navigation={navigation} title={foo.title} />)}</Receiver>,
    };
    };

    @@ -21,7 +23,12 @@ export default class ScheduleScreen extends React.PureComponent {
    <Query query={scheduleQuery} variables={{ id: navigation.getParam("scheduleId") }}>
    {({ data, loading }) => {
    if (loading) return null;
    return <ScheduleFull schedule={data.schedule} navigation={navigation} />;
    return (
    <Fragment>
    <HeaderConfig title={"bar"} />
    <ScheduleFull schedule={data.schedule} navigation={navigation} />
    </Fragment>
    );
    }}
    </Query>
    </SafeAreaView>
  2. mxmzb created this gist Aug 27, 2018.
    30 changes: 30 additions & 0 deletions screen.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    import React from "react";
    import { SafeAreaView } from "react-native";
    import { Query } from "react-apollo";
    import { scheduleQuery } from "src/modules/Schedule/graphql/queries";

    import { Header } from "src/modules/shared/components";
    import { ScheduleFull } from "src/modules/Schedule/components";

    export default class ScheduleScreen extends React.PureComponent {
    static navigationOptions = ({ navigation }) => {
    return {
    header: () => <Header showBack navigation={navigation} title={"I WANT QUERY DATA HERE WITHOUT WRAPPING THIS IN ANOTHER QUERY COMPONENT"} />,
    };
    };

    render() {
    const { navigation } = this.props;

    return (
    <SafeAreaView>
    <Query query={scheduleQuery} variables={{ id: navigation.getParam("scheduleId") }}>
    {({ data, loading }) => {
    if (loading) return null;
    return <ScheduleFull schedule={data.schedule} navigation={navigation} />;
    }}
    </Query>
    </SafeAreaView>
    );
    }
    }